Javascript как сделать раскрывающийся список

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

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

Раскрывающийся список - это способ представления данных в виде иерархического списка. Элементы списка могут быть свернуты или развернуты, чтобы показать дополнительную информацию. В этом руководстве мы покажем, как создать раскрывающийся список на JavaScript.

Для создания раскрывающегося списка нам потребуется использовать следующие HTML-теги:

<ul>
    <li>
        <a href="#">Элемент списка</a>
        <ul>
            <li><a href="#">Дочерний элемент списка</a></li>
            <li><a href="#">Дочерний элемент списка</a></li>
        </ul>
    </li>
</ul>

В приведенном выше списке первый элемент списка является предком для дочерних элементов. Давайте также добавим немного CSS, чтобы наш раскрывающийся список выглядел лучше:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul ul {
    display: none;
}

Теперь давайте добавим немного JavaScript-кода, чтобы реализовать раскрывающийся список. Наш скрипт будет отслеживать клики по элементам списка и переключать видимость дочерних элементов:

// Получаем все элементы списка
const listItems = document.querySelectorAll('li');

// Проходимся по всем элементам списка
listItems.forEach((listItem) => {
    // Получаем первую ссылку внутри элемента списка
    const link = listItem.querySelector('a');

    // Добавляем слушатель на клик
    link.addEventListener('click', (e) => {
        // Запрещаем переход по ссылке
        e.preventDefault();

        // Получаем все дочерние элементы элемента списка
        const childItems = listItem.querySelector('ul');

        // Переключаем видимость дочерних элементов
        if (childItems.style.display === 'block') {
            childItems.style.display = 'none';
        } else {
            childItems.style.display = 'block';
        }
    });
});

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