Молодогвардейцев 454015 Россия, Челябинская область, город Челябинск 89085842764
MindHalls logo

Раскрывающийся список на jQuery

До последнего тянул и не использовал JavaScript в своих проектах. И понял, что очень зря. Появилась задача — сделать красиво скрывающийся и раскрывающийся по нажатию блок. В качестве испытательного полигона был выбран этот бложик, а в качестве блока — обычный вложенный список. Суть в том, чтобы заставить элементы вложенного списка появляться и исчезать по нажатию на элемент внешнего.

Допустим, у нас такой список.

<ul>
    <li><h3>Аверченко Аркадий</h3>
        <ul>
            <li>Повести и рассказы</li>
        </ul>
    </li>
    <li><h3>Андреев Леонид</h3>
        <ul>
            <li>Иуда Искариот</li>
        </ul>
    </li>
    <li><h3>Бодров Виталий</h3>
        <ul>
            <li>Кровь титанов(4 книги)</li>
            <li>Хоббит, или туда-сюда-обратно</li>
        </ul>
    </li>
</ul>

Каждый элемент внешнего списка авторов содержит вложенный список их произведений. Нужно сделать так, чтобы при нажатии на имя автора, список его произведений красиво всплывал под ним, и, не менее красиво, исчезал при повторном нажатии. Покажу два решения.

Выпадающий список с помощью чистого JavaScript

Решение простое, но очень громоздкое. Суть в том, чтобы присвоить каждому подменю свой идентификатор. А «автору» назначить действием onclick вызов функции, которая поменяет у вложенного списка значение свойства display. Обработчик вешается на заголовок h3, чтобы избежать сворачивания списка при нажатии на элемент.

<ul>
    <li onclick="javascript:show_hide('1')"><h3>Аверченко Аркадий</h3>
        <ul id="list_1">
            <li>Повести и рассказы</li>
        </ul>
    </li>
    <li onclick="javascript:show_hide('2')"><h3>Андреев Леонид</h3>
        <ul id="list_2">
            <li>Иуда Искариот</li>
        </ul>
    </li>
    <li onclick="javascript:show_hide('3')"><h3>Бодров Виталий</h3>
        <ul id="list_3">
            <li>Кровь титанов(4 книги)</li>
            <li>Хоббит, или туда-сюда-обратно</li>
        </ul>
    </li>
</ul>

Как можно заметить, функция принимает идентификатор, ищет список с этим id и подменяет его свойство display.

function show_hide(id) {
    var list = document.getElementById('list_' + id).style;
    
    if (list.display == 'none') {
        list.display = 'block';
    }
    else {
        list.display = 'none';
    }
}

Огромный минус такого решения в том, что у каждого вложенного списка должен быть уникальный идентификатор. Кроме того, элементы будут просто появляться и исчезать, а нам хочется плавности.

Поэтому на помощь приходит всем известная библиотека.

Выпадающий список с помощью jQuery

В этот раз мы присвоим всего лишь один id — для самого верхнего списка и получим такую структуру.

<ul id="authors-list">
    <li><h3>Аверченко Аркадий</h3>
        <ul>
             <li>Повести и рассказы</li>
        </ul>
    </li>
    <li><h3>Андреев Леонид</h3>
        <ul>
             <li>Иуда Искариот</li>
        </ul>
    </li>
    <li><h3>Бодров Виталий</h3>
        <ul>
             <li>Кровь титанов(4 книги)</li>
             <li>Хоббит, или туда-сюда-обратно</li>
        </ul>
    </li>
</ul>

Посмотрим обработчик нажатия на автора.

jQuery(function($) {
  $('#authors-list > li > h3').click(function() {

    if ($(this).parent().find('ul').length) {
      $(this).parent().find('ul').slideToggle(200); 

      return false;
    }

  });
});

Как это работает. Вешаем обработчик на заголовок h3, который является дочерним в нашем списке с идентификатором. В строчке $(this).parent().find(‘ul’), $(this) — это h3, берем у него родительский элемент, в нашем случае это li. У этого li находим вложенный список ul, который и содержит произведения «нажатого» автора. Проверяем .length этого элемента, если не нулевая, то вызываем для него функцию .slideToggle(). Она сворачивает и разворачивает содержимое элемента, на вход принимает значение скорости появления.

Заключение

Этот код легко можно использовать, как отправную точку для любого обработчика нажатия. slideToggle замечательная функция, работает для всего и не требует дополнительных классов css.

Я начал свое увлекательное и затяжное путешествие в JavaScript и буду писать о нем. А на сегодня все, спасибо за внимание!