Блог

Главная - Вопросы по программированию - Показать / скрыть с помощью jQuery

Показать / скрыть с помощью jQuery

#javascript #jquery #html #css #html-lists

#javascript #jquery #HTML #css #html-списки

Вопрос:

У меня есть 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 .

Как мне это сделать?

Ответ №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 элементов по отдельности, а не в виде блока. Сделайте первое, если сможете.

Комментарии:

1. Я не могу изменить структуру html.

2. @Rooney Вы все еще можете изменить структуру HTML с помощью jQuery (если вам действительно нужно показать / скрыть их в виде блока). В противном случае nextUntil должен работать нормально.

Ответ №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();
});

Ответ №3:

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

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

Это скроет все not .выпадающие списки;

Чтобы сделать это до следующего выпадающего списка, вам нужно будет использовать:

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

Ответ №4:

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

Скрипка