Question

我如何建立切换锂带有+或-类的元素在切换时显示，并且不显示子菜单。

$(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('+');
            }
        });
    });
});

切换两个类别的导航

1 个答案: