通过jQuery显示/隐藏<li>

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单独隐藏每个嵌套元素而不是作为块的缺点.如果可以的话,先做第一件事.