<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 3.0

PHP и MySQL с Нуля до Гуру 3.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 9 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

В Бонусе «Создание сайта для библиотеки» Вы увидите применение знаний из основного курса при создании полноценного проекта.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

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

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

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


HTML разметка

Сделаем HTML разметку для раскрывающегося списка. Для этого создадим вложенные в друг друга списки.

<ul class="list" id="list">
  <li>Сладости
    <ul>
      <li>Конфеты
        <ul>
          <li>Мармелад</li>
          <li>Батончики</li>
          <li>Ассорти</li>
          <li>Карамель</li>
        </ul>
      </li>
    </ul>
  </li>

  <li>Выпечка
    <ul>
      <li>Торты
        <ul>
          <li>Трюфельный</li>
          <li>Наполеон</li>
          <li>Птичье молоко</li>
          <li>Павлова</li>
        </ul>
      </li>
    </ul>
  </li>

  <li>Напитки
    <ul>
      <li>Соки
        <ul>
          <li>Апельсиновый</li>
          <li>Яблочный</li>
          <li>Персиковый</li>
          <li>Томатный</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS код

На месте убранных дефолтных маркеров, с помощью JavaScript будут переключаться классы для замены плюса на минус и наоборот. Для раскрытия пункта списка, нужно нажать на плюс. Для сокрытия, нажать на минус.

body {
    font-size: 20px;
    font-weight: 500;
    font-family: sans-serif;
}

ul li {
    list-style: none; /* убираем дефолтные маркеры */
}

.list span {
    cursor: pointer;
}

.hide::before {
    content: "+"; /* украшательство вместо маркера */
}

.show::before {
    content: "-"; /* украшательство вместо маркера */
}

JavaScript код

Пройдемся в цикле for of по всем тегам li и обернем их содержимое в тег span с классом show. Тегом span мы ограничим область для клика мышкой, класс show служит чисто оформительским целям. Почему мы заранее не внесли span в разметку? Тогда пришлось для каждого добавленного нового пункта меню через админку, вручную прописывать тег span.

for (let li of list.querySelectorAll('li')) {
    let span = document.createElement('span'); /* создание span */
    span.classList.add('show'); /* добавление класса для span */
    li.prepend(span); /* вставить span внутри li */
    span.append(span.nextSibling) /* присоединить к span следующий узел */
}

Будем отлавливать клики по всем элементам списка и запускать функцию. Если клик не попал в span, то ничего не произойдет. Получим дочерний список (содержимое ul) - переменная childrenList. Проверяем, существует ли вложенный дочерний список? Если есть, то его нужно скрыть или показать с помощью методов add и remove.

list.onclick = function(event) {
    if (event.target.tagName != 'SPAN') return;

    let childrenList = event.target.parentNode.querySelector('ul');
    if (!childrenList) return;
    childrenList.hidden = !childrenList.hidden;

    if (childrenList.hidden) {
        event.target.classList.add('hide');
        event.target.classList.remove('show');
    }

    else {
        event.target.classList.add('show');
        event.target.classList.remove('hide');
    }
}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Gooran Gooran 05.07.2020 06:42:36

Не могу понять, как сделать, что бы списки загружались свернутыми

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.