Jquery 打开子菜单单击并关闭打开的子菜单

我正在使用一个JS代码通过单击li项从菜单中显示子菜单。 当我点击一个li项目时，当子菜单滑动切换时，如果子菜单已经打开，那么它就是滑动。它工作得很好

但我只有一个问题，当点击我的子菜单中的一个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>

和一个JSFIDLE来查看它的运行：

有人能帮我吗？

---

谢谢

试试这个-

  $("#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()
    });

---

您需要停止传播。

在JQuery中指定事件的目标元素

$（“#菜单>li>a”）。单击（函数（）{
$（'ul.sub-menu'）.not（$（this.sibbines（））.slideUp（）；
$（this）.sides（“ul.sub菜单”）.slideToggle（）；
});
。子菜单{
显示：无
}





















将第一个
.not（）
选择器替换为直接子选择器<代码>>

谢谢，但我的2和3 li上没有任何href。不必添加href就可以完成吗？问题是，您必须将JQuery事件附加到特定元素。如果不将2/3包装成某种东西，则很难确定目标。我的意思是，根据你目前的代码，你的目标是2/3和保险商实验室。

  $("#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()
    });