javascript – 显示/隐藏>由jQuery

我有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>没有课程下拉菜单.

我该怎么做呢？

解决方法:

这样做的正确方法是子菜单,所以：

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

标签：jquery,javascript,css,html-lists,html
来源： https://codeday.me/bug/20190716/1482896.html