Question

我正在使用jQuery在我创建的菜单中产生手风琴效果。菜单是选项卡并使用jQuery UI选项卡，根据他们的文档，我不能在一个元素上使用多个效果。因此，我使用了slideUp（）和slideToggle（）来创建有效的效果，即<a onclick="$('ul#categories li ul').slideUp();$(this).next().slideToggle()">Subjects</a>。

但是，我的列表中有另一个无序列表，但这不会显示。我不想设置很多链接来激活滑块，因为这在我的CMS中维护非常复杂，它将链接作为列表输出。我的代码的一个例子是

<div id="member-categories">
<ul id="categories">
    <li>
        <a onclick="$('ul#categories li ul ').slideUp();$(this).next().slideToggle()">Heading 1</a>
        <ul>
            <li><a href="#">Link 1</a>
                <ul>
                    <li><a href="#">Sub-Link 1</a></li>
                    <li><a href="#">Sub-Link 2</a></li>
                    <li><a href="#">Sub-Link 3</a></li>
                    <li><a href="#">Sub-Link 4</a></li>
                </ul>
            </li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
    <li>
        <a onclick="$('ul#categories li ul').slideUp();$(this).next().slideToggle()">Heading 2</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
</ul>
</div>

如果单击标题1，则仅显示链接1和2。单击标题2将显示所有链接。为什么标题1中的链接1的<ul>没有显示？

由于

Answer 1

你正在寻找这样的东西吗？

Demo

当您选择'#Categories li ul'时，这会隐藏所有内部列表和列表项。当您在第一个无序列表上使用slideDown时，它将仅显示（更改其直接子项的显示属性）（换句话说，内部列表和列表项仍然是隐藏的）。内部列表项显示属性仍设置为“display：none”。相反，如果你'显示'每个'ul'，那么将显示它的直接孩子（每个li）。

编辑：Alternativly（如演示所示），您可以隐藏第一组无序列表。

$('#categories').children().children('ul').slideUp();

这样，内部列表在技术上仍然显示。因此，当您显示外部列表时，将显示其所有子项。

Answer 2

onclick="$('ul#categories li ul').slideUp();$(this).next('ul').slideToggle()">Subjects</a>

那怎么样？

jQuery手风琴，具有多个UL元素

2 个答案: