显示任何一个顶级菜单项的子项和隐藏/滑动其他的子项

Question

我的菜单切换问题很小。以下是该问题的直观参考。目前，您可以看到顶部链接的子项目是可见的。我需要在任何给定时间仅显示一个顶部链接的子项目。如果单击一个顶部链接，则应隐藏/滑动其子项目。

---

---

JS

jQuery(document).ready(function(){
     jQuery('.menu-item').click(function(){ 
     var position = jQuery(this).position(); 
     jQuery('.sub-menu', this).slideDown('slow'); 
     }); 
});

HTML - 菜单的示例结构。

<ul class="menu">
<li class="menu-item" id="544" ><a href="#">Top Link One</a>
    <ul class="sub-menu">
        <li class="menu-item"><a href="#">link one</a></li>
        <li class="menu-item"><a href="#">link two</a></li>
        <li class="menu-item"><a href="#">link three</a></li>
</ul>
</li>


<li class="menu-item" id="545"><a href="#">Top Link Two</a>
<ul class="sub-menu">
    <li class="menu-item"><a href="#">link four</a></li>
    <li class="menu-item"><a href="#">link five</a></li>
    <li class="menu-item"><a href="#">link six</a></li>
</ul>
</li>

我尝试在SO处跟踪了很多类似的问题，但似乎对他们自己的案例非常具体。我刚刚学习JS所以请在这里帮助我。感谢。

Answer 1

将点击处理程序修改为：

jQuery(document).ready(function(){
 jQuery('.menu-item').click(function(){ 
 jQuery('.menu-item .sub-menu').slideUp('slow'); //slideup all submenus first
 var position = jQuery(this).position(); 
 jQuery('.sub-menu', this).slideDown('slow'); 
 }); 
});

Answer 2

尝试在此处有效使用.not()功能来解决您的问题，

jQuery(document).ready(function(){
     jQuery('.menu-item').click(function(){ 
       jQuery('.sub-menu').not(jQuery('.sub-menu', this).slideDown('slow')).slideUp('slow'); 
     }); 
});

Answer 3

试试这个：您可以先隐藏所有sub-menu，然后点击sub-menu下的menu-item可见。

jQuery(document).ready(function(){
 jQuery('.menu-item').click(function(){ 
 // hide all submenu first
 jQuery('.menu-item').find('.sub-menu').slideUp('slow');
 var position = jQuery(this).position(); 
 // show clicked submenu
 jQuery('.sub-menu', this).slideDown('slow'); 
 }); 
});