我正在为我在移动设备上的导航制作一个简单的 Accordion 。 HTML 的结构如下:
<nav>
<ul id="topMenu">
<li>
<ul>
<li><h3><a href="#">Work</a></h3></li>
<li><a href="/work/">Brand ID</a></li>
<li><a href="/work/">Print</a></li>
<li><a href="/work/">Book & Editorial</a></li>
<li><a href="/work/">Web</a></li>
<li><a href="/work/">Packaging</a></li>
<li><a href="/work/">Exhibit</a></li>
</ul>
</li>
<li>
<ul>
<li><h3><a href="#">About</a></h3></li>
<li><a href="/about/">Our Story</a></li>
<li><a href="/about/">Methodology</a></li>
<li><a href="/about/">Team</a></li>
<li><a href="/about/">Studio</a></li>
<li><a href="/about/">Services</a></li>
<li><a href="/about/">Partners</a></li>
</ul>
</li>
</ul>
</nav>
当屏幕尺寸达到移动设备时,我有一套全新的 css(使用媒体查询)来实现这样的屏幕:
第一个 child 显示,其余的隐藏。我正在使用 jquery 来创建 Accordion 式显示,如下所示:
$("nav #topMenu li ul").toggle(function(){
$(this).children("li").stop().slideDown();
}, function(){
$(this).children("li:nth-child(1n+2)").stop().slideUp();
});
这很好用;但是,我正在寻找一种行为,当一个面板打开时,其余面板关闭。因此,在任何给定时间, Accordion 上只会打开一个面板。这是 Accordion 的常见行为。
当用户单击任何父级列表项时,你能帮助 jquery 滑下所有打开的面板吗?谢谢!
最佳答案
这是一个快速解决方法 http://jsfiddle.net/sethunath/wayfP/ 在这里我触发下一个 ul 的点击,如果它是可见的话
关于jquery - 单击新选项卡时关闭嵌套的 Jquery Accordion 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10401998/