Описание для понимания: есть класс modal__menu__text
, при клике на который у соседнего (ни дочерний, ни родительский) класса modal__menu__inner__list
появлялся класс list__show
, меняющий дисплей c display: none
на display: flex
.
Но при клике меня в консоли ошибка следующего характера:
Uncaught TypeError: Cannot read properties of undefined (reading 'toggle') at HTMLParagraphElement.
Я примерно понимаю контект ошибки, но не знаю, как её исправить и привести код в рабочее состояние. Подскажите, пожалуйста, укажите на ошибки
let listBtn = document.querySelectorAll(".modal__menu__inner__list");
let clickBtn = document.querySelectorAll(".modal__menu__text");
for (let element of clickBtn) {
element.addEventListener("click", function () {
listBtn.classList.toggle("list__show");
});
}
console.log("success");
.modal__menu {
margin: 35px 0 0 20px;
display: flex;
justify-content: flex-start;
.modal__menu__content {
width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: start;
list-style-type: none;
.modal__menu__content__text {
border: 1px solid #e6e6e6;
border-left: none;
border-right: none;
.modal__menu__text {
font-family: "Montserrat";
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 46px;
color: #000000;
}
.modal__menu__text:active {
color: #1277d3;
}
.modal__menu__inner__list {
display: none;
flex-direction: column;
gap: 10px;
list-style-type: none;
margin-bottom: 10px;
font-weight: 400;
font-size: 14px;
line-height: 36px;
transition: 0.4s ease;
}
.modal__menu__inner__list.list__show {
display: flex;
}
}
.modal__menu__content__text:nth-child(1) {
border: none;
}
.modal__menu__content__text:nth-child(3) {
border-top: none;
}
.modal__menu__content__text:nth-child(4) {
border: none;
}
.modal__menu__content__contacts {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-start;
margin-top: 30px;
p {
font-weight: 700;
font-size: 22px;
line-height: 36px;
text-transform: uppercase;
color: #000000;
}
}
}
}
<div class="modal__menu">
<ul class="modal__menu__content">
<li class="modal__menu__content__text">
<p class="modal__menu__text">Услуги</p>
<ul class="modal__menu__inner__list">
<li>Банкротство физических лиц</li>
<li>Банкротство юридических лиц</li>
<li>Защита от коллекторов</li>
<li>Кредитные споры</li>
<li>Семейные споры</li>
<li>Судебная защита</li>
</ul>
</li>
<li class="modal__menu__content__text">
<p class="modal__menu__text">О нас</p>
<ul class="modal__menu__inner__list">
<li>Банкротство физических лиц</li>
<li>Банкротство юридических лиц</li>
<li>Защита от коллекторов</li>
<li>Кредитные споры</li>
<li>Семейные споры</li>
<li>Судебная защита</li>
</ul>
</li>
<li class="modal__menu__content__text">
<p class="modal__menu__text">Отзывы и практика</p>
<ul class="modal__menu__inner__list">
<li>Банкротство физических лиц</li>
<li>Банкротство юридических лиц</li>
<li>Защита от коллекторов</li>
<li>Кредитные споры</li>
<li>Семейные споры</li>
<li>Судебная защита</li>
</ul>
</li>
<li class="modal__menu__content__text">
<p class="modal__menu__text">Контакты</p>
<ul class="modal__menu__inner__list">
<li>Банкротство физических лиц</li>
<li>Банкротство юридических лиц</li>
<li>Защита от коллекторов</li>
<li>Кредитные споры</li>
<li>Семейные споры</li>
<li>Судебная защита</li>
</ul>
</li>
<li class="modal__menu__content__contacts">
<img src="./img/whatsapp.svg" alt="" />
<p class="modal__menu__text">8 800 222 26 94</p>
</li>
</ul>
</div>