Показать / скрыть <li>от 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> без классов, от текущего к следующему 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

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

Fiddle

Answer 4

Если у вас есть элемент в переменной $ dropdown, вы можете использовать это:

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

Это скроет не все .dropdowns;

Для этого до следующего .dropdown вам понадобится:

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