显示任何顶部菜单项的子项，并隐藏/滑动其他项的子项
显示任何顶部菜单项的子项，并隐藏/滑动其他项的子项
提问于 2014-07-25 09:40:11
我有一个菜单切换的小问题。下面是这个问题的视觉参考。当前，您可以看到两个顶部链接的子项都是可见的。我需要的子项目，只有一个顶部链接在任何给定时间可见。如果单击一个顶部链接，则应隐藏/滑动其子项。
JS
jQuery(document).ready(function(){
jQuery('.menu-item').click(function(){
var position = jQuery(this).position();
jQuery('.sub-menu', this).slideDown('slow');
});
});-菜单的样例结构。
<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>我试着在这里跟踪许多类似的问题，但似乎是非常具体的，他们自己的情况。我只是在学JS，所以请帮帮我。谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-07-25 09:42:02
修改单击处理程序以：
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');
});
});Stack Overflow用户
发布于 2014-07-25 09:42:13
尝试在这里有效地使用.not()函数来解决您的问题，
jQuery(document).ready(function(){
jQuery('.menu-item').click(function(){
jQuery('.sub-menu').not(jQuery('.sub-menu', this).slideDown('slow')).slideUp('slow');
});
});Stack Overflow用户
发布于 2014-07-25 09:43:37
尝试如下:您可以首先隐藏所有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');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24952630
复制相关文章
相似问题
腾讯云开发者
