Question

我有一个带有嵌套ul的

的简单ul菜单here

我希望嵌套菜单在单击链接时向下滑动并在第二次单击时再次向上滑动。这很有效。

我还需要在点击其他链接时关闭任何其他打开的嵌套菜单。这不起作用。

在打开我想要的嵌套菜单之前，我尝试使用它来关闭所有打开的嵌套菜单但是，当单击嵌套菜单中的链接时，这也会关闭嵌套菜单。

$(document).ready(function () {
    $('#nav ul.children').slideUp();
    $('#nav li').click(function (e) {
        $('ul.children').slideUp();
        $('ul', this).slideToggle();
        e.stopPropagation();
    });
});

http://www.ttmt.org.uk/forum/nav/index2.html

如何在单击父级时滑动嵌套菜单，并在单击其他链接时关闭所有打开的嵌套菜单。

<ul id="nav">
   <li><a href="#">One</a>
     <ul class="children">
        <li><a href="http://www.google.com">One/One</a></li>
        <li><a href="http://www.bbc.com">One/Two</a></li>
        <li><a href="#">One/Three</a></li>
     </ul>
   </li>
   <li><a href="#">Two</a></li>
   <li><a href="#">Three</a>
     <ul class="children">
        <li><a href="#">Three/One</a></li>
        <li><a href="#">Three/Two</a></li>
     </ul>
   </li>  
 </ul>

 $(document).ready(function(){
   $('#nav ul.children').slideUp();
   $('#nav li').click(function(e){
     //$('ul.children').slideUp();
     $('ul', this).slideToggle();
     e.stopPropagation();
   });
 });

修改

我的代码还有另一个主要问题，因为我在开头用

关闭了嵌套的ul

$('#nav ul.children').slideUp();

单击链接并重新加载页面时，所有菜单都将关闭。如何在页面重新加载时保持嵌套菜单处于打开状态。

Answer 1

要防止单击子项时的操作，请使用：

$('#nav > li').click(function(e){ ...

'＆gt;'与任何后代相比，字符选择一个孩子的li

...所以点击子版块中的链接时不会出现$('ul.children').slideUp();。

Answer 2

首先隐藏在页面加载时使用css样式隐藏的所有嵌套ul标签，以解决第二个问题（pageload）

 li ul
 {
   display:none;
 }

放这个脚本

 $("#nav li").click(function(){
    $(this).parent().find("li ul:visible").slideUp(); //this helps to slideUp visible uls
    //then your code
 });

jQuery嵌套ul下拉菜单

2 个答案: