Question

我有这个样本：

代码HTML：

<ul class="menu">
  <li>
    <a>Menu 1</a>
  </li>
  <li>
    <a>Menu 2</a>
    <ul class="submenu-1">
      <li>link1</li>
      <li>link2</li>
    </ul>  
  </li>
   <li>
    <a>Menu 3</a>
    <ul class="submenu-1">
      <li>link1</li>
      <li>link2</li>
    </ul>  
  </li>
</ul>

CODE JS：

$('.menu a').click(function(){
   var subMenu  = $(this).closest("li").find("submenu-1");
   if(subMenu){
     alert("open current sub menu")
   }


 });

我想做的就是下一件事......例如：

1.如果您点击"menu2"打开其子菜单。

2.如果您点击"menu3"隐藏"menu2"的子菜单，请打开“menu3”的子菜单

你可以发一个简短的例子告诉我如何解决这个问题？

提前致谢！

Answer 1

使用jquery show()/toggle()

   $('.menu a').click(function(){
   var subMenu  = $(this).next(".submenu-1");
   if(subMenu.length >0){
     $(".submenu-1").not(subMenu).hide();
    $(subMenu).toggle();
   }


 });

http://codepen.io/anon/pen/jqmpqP

Answer 2

我认为这会对你有所帮助。更干净。

$('.menu a').click(function(){
  $(".submenu").hide();
  $(this).next().show();
});

http://codepen.io/airsakarya/pen/BKRPoE

如何打开当前子菜单？在Jquery

2 个答案: