1

我这里有一个带有嵌套 ul 的简单 ul 菜单

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

当单击另一个链接时，我还需要关闭任何其他打开的嵌套菜单。这是行不通的。

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

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

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

4

2 回答 2

1

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

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

'>' 字符选择一个 li，它是一个与任何后代相反的孩子

...因此$('ul.children').slideUp();单击子菜单中的链接时不会发生。

于 2012-04-25T09:33:01.790 回答
0

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

 li ul
 {
   display:none;
 }

把这个脚本

 $("#nav li").click(function(){
    $(this).parent().find("li ul:visible").slideUp(); //this helps to slideUp visible uls
    //then your code
 });
于 2012-04-25T10:12:54.907 回答