Почему при нажатии на кнопку не скрывается элемент?
.cards {
position: relative;
height: 45vh;
overflow-y: scroll;
overflow-x: hidden;
}
.cards__all {
padding: 15px 0;
}
.cards__true {
padding: 15px 0;
}
.cards__false {
padding: 15px 0;
}
<div class="cards">
<div class="preloader__wrapper">
<span class="spinner spinner-large spinner-blue spinner-slow"></span>
</div>
<div class="cards__all hidden">
</div>
<div class="cards__true hidden"></div>
<div class="cards__false"></div>
</div>
Сейчас речь идет о блоке dropdown. Помогите пожалуйста сделать так, чтобы при повторном нажатии элемент dropdown__content скрывался
cardsFalse.innerHTML += `
<div class="card">
<div class="card__content">
<div class="card__group-one">
<button><img class="card__checkbox card__checkbox-inProgress" id=${card.id} src="/source/img/inProgress.svg" alt=""></button>
<div>
<div class="card__title">${card.Title}</div>
<div class="card__desc">${card.Desc}</div>
</div>
</div>
<div class="card__group-two">
<div>
<div class="card__info">${card.Info}</div>
<div class="card__date">${card.Date}</div>
</div>
<div class="dropdown">
<button><img src="/source/img/more.svg" class="card__more" data-menu=menu_${card.id}_nocompleted alt=""></button>
<div class="dropdown__content hidden" id=menu_${card.id}_nocompleted>
<button class="card__edit" id=${card.id}><img src="/source/img/edit.svg" alt="">Редактировать</button>
<button class="card__delete" id=${card.id}><img src="/source/img/delete.svg" alt="">Удалить</button>
</div>
</div>
</div>
</div>
</div>
// Код кнопки
const cards = document.querySelector('.cards');
function menuHidden () {
let menuEdit = document.querySelectorAll('.dropdown__content');
menuEdit.forEach((item) => {
item.classList.add('hidden')
})
}
cards.addEventListener('click', (e) => {
if(e.target.classList.contains('card__more')) {
menuHidden();
let c = e.target.getAttribute('data-menu');
document.querySelector(`#${c}`).classList.toggle('hidden');
}
})
.hidden {
display: none;
}