打开子菜单onclick并关闭打开的子菜单 [英] open sub menu onclick and close opened sub menu

问题描述

我使用JS代码通过点击li项目从菜单中调出子菜单。
当我点击一个li项目，当子菜单slideToggle，如果一个子菜单已经打开，那么它的slideUp。

但我有一个问题，当从子菜单点击一个li，它的slideUp然后再次SlideToggle，我该如何防止这个？ / p>

这是我的jquery：

  $（＃menu li ）.click（function（）{
 $（'ul.sub-menu'）。not（$（this）.children（））.slideUp（）; 
 $（this）.children ul.sub-menu）。slideToggle（）; 
}）; 
  

这里是我到目前为止没有成功的尝试：

  $（＃menu li）。not（$（'＃menu li子菜单li a' $ b $（'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 /

有人可以帮我吗？
感谢

解决方案

尝试 -

  $（＃menu li）。not（$（'＃menu li子菜单li a' b $（'ul.sub-menu'）。not（$（this）.children（））.slideUp（）; 
 $（this）.children（ul.sub-menu）。slideToggle ）; 
 e.stopPropagation（）
}）; 
  

您需要停止传播。

I'm using a JS code to dispay sub menu from menu by clicking on li items. when I click on a li item, when sub menu slideToggle and if a sub menu is already openned then it's slideUp. It works perfectly.

But I have juste one issue, when clicking on a li from my sub menu, it slideUp and then SlideToggle again, how can I prevent this ?

Here is my jquery :

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

and here is what I've tried so far without success :

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

here is my 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>

and my CSS :

.sub-menu {display:none}

and a Jsfiddle to see it in action :

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

can anybody help me with this ? thanks

解决方案

Try This-

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

You need to stop propagation.

这篇关于打开子菜单onclick并关闭打开的子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！