javascript - 通过 jQuery 显示/隐藏

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>没有类(class)，从当前到下一个li.dropdown ，应该变得可见。当我们再次点击它时相反的 Action - 隐藏 <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 元素，而不是作为一个 block 。如果可以，先做。