Реализовываю своего рода Dropdown menu.
Есть кнопка с id="btnGroupDrop1" при нажатии на нее, должно раскрыться меню с атрибутом aria-labelledby="btnGroupDrop1".
Варианты раскрытия:
1) Добавление класса
2) Добавления стиля на прямую
Как реализовать не знаю. Прошу помочь без использования jquery и строго не судите, я активно изучаю js
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Купить
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<div>Купить</div>
<div>Снять</div>
<div>Сдать / Продать</div>
</div>
document.body.addEventListener("click", function(){ // Слежу за всей страницей
var element = event.target, // Это элемент по которому мы кликаем
elementsDropdown = document.getElementsByClassName('dropdown-menu'); // Это как раз и меню которое должно раскрыться
for (var i = 0; i < elementsDropdown.length; i++) { // Перебераем класы, тк на странице может быть несколько подобных меню
if (elementsDropdown[i].getAttribute('aria-labelledby') == element.id) { /*Находим элемент с классом dropdown-menu и атрибутом aria-labelledby равным id того элемента по которому мы кликнули*/
console.log('yes');
break; // Выходим из цикла
}
}
});
