JS при клике тогглит класс не тому блоку
написал HTML, CSS, и к нему JS код к одной секции, при клике по блоку у него должен тогглиться класс, но он отглится у дочернего блока, а не у того, по которому кликнули, что очень странно... Ниже приложу код:
<section class="section questions">
<div class="container">
<h2 class="title">Остались вопросы?</h2>
<div class="content">
<div class="questions__item">
<h3 class="questions__title">Какие отличия между Mavic 2 Pro и Mavic 2 Zoom?</h3>
<p class="questions__text">В Mavic 2 улучшены практически все аспекты: камера, передача видеосигнала, полётное время, скорость, уровень шума, обнаружение препятствий в нескольких направлениях, интеллектуальные функции и уникальная функция Hyperlapse (гиперлапс).</p>
</div>
<div class="questions__item">
<h3 class="questions__title">Чем Mavic 2 лучше Mavic Pro?</h3>
<p class="questions__text">В Mavic 2 улучшены практически все аспекты: камера, передача видеосигнала, полётное время, скорость, уровень шума, обнаружение препятствий в нескольких направлениях, интеллектуальные функции и уникальная функция Hyperlapse (гиперлапс).</p>
</div>
<div class="questions__item">
<h3 class="questions__title">Можно ли подключить Mavic 2 к очкам DJI Goggles?</h3>
<p class="questions__text">В Mavic 2 улучшены практически все аспекты: камера, передача видеосигнала, полётное время, скорость, уровень шума, обнаружение препятствий в нескольких направлениях, интеллектуальные функции и уникальная функция Hyperlapse (гиперлапс).</p>
</div>
<div class="questions__item">
<h3 class="questions__title">Является ли Mavic 2 водонепроницаемым?</h3>
<p class="questions__text">В Mavic 2 улучшены практически все аспекты: камера, передача видеосигнала, полётное время, скорость, уровень шума, обнаружение препятствий в нескольких направлениях, интеллектуальные функции и уникальная функция Hyperlapse (гиперлапс).</p>
</div>
</div>
</div>
</section>
.questions {
&__item {
background-color: rgba(0, 0, 0, 0.30);
padding: 22px 10px 22px 40px;
max-width: 762px;
width: 100%;
position: relative;
::after {
content: url('../images/questions__item-arrow.svg');
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
cursor: pointer;
}
&__title {
@extend %ubuntu-medium;
margin-bottom: 20px;
font-size: 21px;
line-height: 132.135%;
max-width: 510px;
}
&__text {
@extend %ubuntu-light;
font-size: 15px;
line-height: 130%;
max-width: 640px;
display: none;
}
&__item--active .questions__item-text {
display: block;
}
}
const questions__item = document.querySelectorAll('.questions__item');
questions__item.forEach((e) => {
e.addEventListener('click', (el) => {
el.target.classList.toggle('questions__item--active');
});
})
Источник: Stack Overflow на русском