@Dmitrii-Milk
Хочу научится писать качественный код

Как сделать выпадающий список при клике на кнопку в JavaScript?

Я делаю сайт для практики, с помощью библиотеки bootstrap4. Взял оттуда пока только nav-bar и хочу реализовать сайд бар с меню. В меню 2 кнопки при клике на которые должно разворачиваться их содержимое, я дошел до того момента, что при клике на любую из кнопок, открывается содержимое только 1-вой кнопки, вне зависимости от того на какую кнопку я нажал, 1 или 2-ю. Подскажите пожалуйста как это реализовать.

Вот сам код:

  • Вопрос задан
  • 589 просмотров
Решения вопроса 1
@tansur
Вечный junior
Код javascript:
// Вешаем обработчик событий на каждый элемент списка (в нашем случае ссылки)
document.querySelectorAll('.sideBtn > a').forEach(btn => {
    // Вешаем обработчик событий по клику
    btn.addEventListener('click', function(e) {
        // this это текущая кнопка, где с помощью метода nextElementSibling 
        // выбираем соседний элемент и добавляем в него css класс '.show'
        this.nextElementSibling.classList.toggle('show');
    });
});

В стили дописываем класс.
.show {
    display: inline-block;
}

Почитать:
document.querySelectorAll()
.nextElementSibling
Цикл по dom-элементам (англ.)
Добавление/удаление css-класса
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы