Question

我有像

这样的HTML

<ul>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

CSS：

li {display:none;}
li.dropdown {display:block;}

当我们点击li.dropdown时，所有<li>没有类，从当前到下一个li.dropdown，都应该可见。当我们再次点击它时相反的操作 - 隐藏<li>而没有等级dropdown。

我该怎么做？

Answer 1

执行此操作的正确方法是使用子菜单，所以：

<ul>
    <li class="dropdown">text
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
    etc...
</ul>

然后你可以做

$('li.dropdown').click(function() {
    $(this).find('ul').slideToggle('slow');
});

否则，您必须使用nextUntil：

$('li.dropdown').click(function() {
    $(this).nextUntil('li.dropdown').slideToggle('slow');
});

这样做的缺点是可以单独隐藏每个嵌套的li元素，而不是块。如果可以的话，先做第一个。

Answer 2

我建议使用嵌套列表结构：

<ul>
<li class="dropdown">text
    <ul>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
    </ul>
</li>
<li class="dropdown">text
    <ul>
        <li>text</li>
        <li>text</li>
    </ul>
</li>
</ul>

像这样创建一个CSS：

li.dropdown ul {
    display : none;
}

然后只显示/隐藏嵌套的无序列表：

$('li.dropdown').click(function() {
    $(this).children('ul').toggle();
});

Answer 3

如果你有$ dropdown变量中的项目，那么你可以使用它：

$dropdown.next( "li:not(.dropdown)" ).hide();

这将隐藏所有不是.dropdown;

要执行此操作，直到下一个.dropdown，您需要使用：

$dropdown.next("li").each(...);

Answer 4

$("li.dropdown").click(function() {
    $(this).nextUntil(".dropdown").toggle();
});

Fiddle

显示/隐藏<li> by jQuery </li>

4 个答案: