jQuery嵌套ul下拉菜单

我有一个简单的ul菜单和嵌套的ul

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

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

在打开所需的嵌套菜单之前，我尝试使用此选项关闭所有打开的嵌套菜单 但这也会在单击嵌套菜单中的链接时关闭嵌套菜单

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

<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 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>

编辑

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

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

单击链接并重新加载页面时，所有菜单都将关闭。

---

重新加载页面时，如何保持嵌套菜单打开。

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

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

“>”字符选择一个li，该li与任何后代相比都是子级

---

…因此，

$（'ul.children'）.slideUp（）”。
要防止单击子项时的操作，请使用以下命令：

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

“>”字符选择一个li，该li与任何后代相比都是子级

…因此，
$（'ul.children'）.slideUp（）。
首先，在页面加载时使用css样式隐藏所有嵌套的ul标记，以解决第二个问题（页面加载）

把这个脚本

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

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

把这个脚本

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

你的链接死了，那不是很有用。你的链接死了，那不是很有用。