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

Программирование Веб программирование Раскрывающийся список на jQuery

Помечено: ,

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 1 месяц, 3 нед. назад.

  • Автор
    Сообщения
  • #5499
    @admin

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

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

    <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 и буду писать о нем. А на сегодня все, спасибо за внимание!

Для ответа в этой теме необходимо авторизоваться.