const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown =>{
const select = dropdown.querySelector('.select');
const caret = dropdown.querySelector('.caret');
const menu = dropdown.querySelector('.menu');
const options = dropdown.querySelectorAll('.menu li');
const selected = dropdown.querySelector('.selected');
select.addEventListener('click', () => {
select.classList.toggle('select-clicked');
caret.classList.toggle('caret-rotate');
menu.classList.toggle('menu-open');
});
options.forEach(option => {
option.addEventListener('click', () => {
selected.innerText = option.innerText;
select.classList.remove('select-clicked');
caret.classList.remove('caret-rotate');
menu.classList.remove('menu-open');
options.forEach(option => {
option.classList,remove('active');
});
option.classList.add('active');
});
});
});
Код javascript. При выполнении должно работать выпадающее меню. Должны срабатывать css стили при нажатии на кнопку. Не могу найти ошибку. Js правильно подключен. Проверял alertом
<div class="dropdown">
<div class="select">
<span class="selected">
More Filters
</span>
<div class="caret"></div>
</div>
<ul class="menu">
<li class="active"> More Filters</li>
<li>Recently listed</li>
<li>Recently sold</li>
<li>Price Low to High</li>
<li>Price High to Low</li>
</ul>
</div>