使用两个类切换导航

Question

如何使用class +或- on切换来构建切换li元素，而子菜单是显示而不是显示。

​

$(document).ready(function() {
  $(".sub-menu").hide();
  $(".sub-menu").parent('li').addClass('active');
  $(".sub-menu").parent('li').click(function() {
    $(".sub-menu").toggle("slow", function() {
      if ($(this).is(':visible')) {
        $(".sub-menu").parent('li').addClass('unactive');
      } else {
        $(".sub-menu").parent('li').addClass('active');
      }
    });
  });
});

.active::before {
  content: '+';
}

.noactive::before {
  content: '-';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Item1</li>
  <li>Item2
    <ul class="sub-nav">
      <li>Item2a</li>
      <li>Item2b</li>
    </ul>
  </li>
</ul>

​

Answer 1

首先，您在类命名中有一个拼写错误，但它不能解决问题，因为最后一个css类更强大，一旦它被分配，它就不会在下一次单击时改变。尝试使用span元素而不是此处的类：

<ul>
<li>Item1</li>
<li><span>+</span>Item2
    <ul class="sub-menu">
        <li>Item2a</li>
        <li>Item2b</li>
    </ul>
</li>

​

然后，您可以使用.text()函数在单击时更改其值：

    $(document).ready(function() {
    $(".sub-menu").hide();

    $(".sub-menu").parent('li').click(function() {
        $(".sub-menu").toggle("slow", function() {
            if ($(this).is(':visible')) {
                $("span").text('-');
            } else {
                $("span").text('+');
            }
        });
    });
});