打開子菜單onclick並關閉打開的子菜單

Question

我使用JS代碼通過點擊li項目從菜單中顯示子菜單。 當我點擊li項目時，子菜單slideToggle，如果子菜單已經打開，那麼它是slideUp。它完美的作品。

但我有一個問題，當從我的子菜單中點擊li時，它會再次滑動，然後再次滑動滑塊，我該如何防止這種情況發生？

這裏是我的jQuery：

$("#menu li").click(function() { 
    $('ul.sub-menu').not($(this).children()).slideUp(); 
    $(this).children("ul.sub-menu").slideToggle(); 
}); 

這裏是我試過到目前爲止沒有成功：

$("#menu li").not($('#menu li sub-menu li a')).click(function() { 
    $('ul.sub-menu').not($(this).children()).slideUp(); 
    $(this).children("ul.sub-menu").slideToggle(); 
}); 

這裏是我的html：

<ul id="menu"> 
<li><a href="#">1</a></li> 
<li>2 
<ul class="sub-menu"> 
<li><a href="#">2.1</a></li> 
<li><a href="#">2.2</a></li> 
</ul> 
</li> 
<li>3 
<ul class="sub-menu"> 
<li><a href="#">3.1</a></li> 
</ul> 
</li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
</ul> 

和我CSS：

.sub-menu {display:none} 

和的jsfiddle看到它在行動：

http://jsfiddle.net/2s023cfc/1/

任何人可以幫助我嗎？ 感謝

Answer 1

嘗試這個 -

$("#menu li").not($('#menu li sub-menu li a')).click(function (e) { 
     $('ul.sub-menu').not($(this).children()).slideUp(); 
     $(this).children("ul.sub-menu").slideToggle(); 
     e.stopPropagation() 
    }); 

你需要停止傳播。

Answer 2

指定您在JQuery中將事件定位到哪個元素的最多！

$("#menu > li > a").click(function() { 
 
    $('ul.sub-menu').not($(this).siblings()).slideUp(); 
 
    $(this).siblings("ul.sub-menu").slideToggle(); 
 
});

.sub-menu { 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
    <li><a href="#">1</a></li> 
 
    <li><a href="#">2</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">2.1</a></li> 
 
      <li><a href="#">2.2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">3.1</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
    <li><a href="#">6</a> 
 
    </li> 
 
</ul>