0

我正在为移动设备上的导航制作一个简单的手风琴。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（使用媒体查询）来实现这样的屏幕：

手风琴菜单

第一个孩子显示，其余的被隐藏。我正在使用 jquery 创建手风琴风格的显示，如下所示：

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

这很好用；但是，我正在寻找一种行为，即当一个面板打开时，其余面板关闭。因此，在任何给定时间，手风琴上只会打开一个面板。这是手风琴的常见行为。

当用户单击任何父级列表项时，您可以帮助 jquery 向下滑动所有打开的面板吗？谢谢！

4

1 回答 1

0

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

于 2012-05-02T12:07:55.513 回答