子菜单导航

Question

我了解Jquery，并且在菜单方面需要一些帮助，在主菜单中有一些用于链接的子菜单。我的代码在单击时显示所有子菜单，而不仅仅是在我单击的女巫上显示链接的子菜单。

$(document).ready(function(){
    $(".sub-menu").hide();
    $(".menu-primary_menu-container li").has("ul").children("a").append("<span> + </span>");
    $(".sub-menu").parent('li').click(function() {
        $(".sub-menu").toggle("slow", function() {
            if ($(this).is(':visible')) {
                $("span").text('-');
            } else {
                $("span").text('+');
            }
        });
    });

	
});

<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>
  <li>Item3
    <ul class="sub-nav">
      <li>Item3a</li>
      <li>Item3b</li>
    </ul>
  </li>
</ul>

链接女巫包含一个子菜单，带有“ +”符号，然后用户可以单击“ +”显示子菜单。在“-”上单击，子菜单不可见。

Answer 1

尝试使用jQuery addClass来解决问题！

用作addClass("show")或removeClass("show")！