单击新选项卡时,关闭嵌套Jquery手风琴菜单

时间:2012-05-01 17:58:11

标签: jquery css 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(使用媒体查询)来实现这样的屏幕:

Accordion Menu

显示第一个孩子,其余部分隐藏。我正在使用jquery来创建如此的accordio风格的显示:

$("nav #topMenu li ul").toggle(function(){
    $(this).children("li").stop().slideDown();
}, function(){
    $(this).children("li:nth-child(1n+2)").stop().slideUp();
});

这很有效;但是,我正在寻找一种行为,当一个面板打开时,其余面板关闭。因此,在任何时候,只有一个小组将在手风琴上开放。这是手风琴的常见行为。

当用户点击任何父级列表项时,你能帮助jquery滑下所有打开的面板吗?谢谢!

1 个答案:

答案 0 :(得分:0)

以下是一个快速解决方法http://jsfiddle.net/sethunath/wayfP/ 如果它可见,我在这里触发下一个ul的点击