БЛОГ НА HUSL


Почему событие срабатывает только на первый элемент?

Автор вопроса: Fedor Morozov

Здрасти, хочу сделать появление списка по клику по button, но скрипт работает только на первую button. Плчему? спс

window.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.second-menu-btn').forEach(function (Btn) {
    Btn.addEventListener('click', function (event) {
        const path = event.currentTarget.dataset.path

        document.querySelectorAll('.wrap2').forEach(function (
            Content) {
            Content.classList.remove(
                'is-active')
        })
        document.querySelector('.wrap2').classList
            .add('is-active')
    })
})

});

<li class="section__top-nav-second-menu-item" id="list-initial-1">
                        <button class="second-menu-btn">
                            Реализм
                            <svg class="arrow-for-second-menu-btn" width="12" height="7" viewBox="0 0 12 7"
                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11 1L6 6L1 1" stroke="white" />
                            </svg>
                        </button>
                        <div class="wrap2" id="list-items">
                            <ul class="dop-list-items" data-simplebar>
                                <li class="dop-list-item list-img-1">
                                    <a href="#" class="dop-list-item-link">Тинторетто</a>
                                </li>
                                <li class="dop-list-item list-img-2">
                                    <a href="#" class="dop-list-item-link">Фридрих</a>
                                </li>
                                <li class="dop-list-item list-img-3">
                                    <a href="#" class="dop-list-item-link">Леонардо</a>
                                </li>
                                <li class="dop-list-item list-img-4">
                                    <a href="#" class="dop-list-item-link">Верроккьо</a>
                                </li>

                                <li class="dop-list-item list-img-1">
                                    <a href="#" class="dop-list-item-link">Тинторетто</a>
                                </li>
                                <li class="dop-list-item list-img-2">
                                    <a href="#" class="dop-list-item-link">Фридрих</a>
                                </li>
                                <li class="dop-list-item list-img-3">
                                    <a href="#" class="dop-list-item-link">Леонардо</a>
                                </li>
                                <li class="dop-list-item list-img-4">
                                    <a href="#" class="dop-list-item-link">Верроккьо</a>
                                </li>
                            </ul>
                        </div>
                    </li>

.wrap2 скрыт dispal none. нажимая на second-menu-btn у класса wrap2 display none меняется на display block


Источник

Ответы (1 шт):

Автор решения: Макс к

Если у вас есть несколько списков, каждый из которых открывается при клике по кнопке, то, судя по вашей разметке, нужно делать видимым, первого "соседа" этой кнопки. Т.е. как-то так:

  let btns = document.querySelectorAll('.second-menu-btn');
let lists = document.querySelectorAll('.wrap2');

for (let btn of btns) {
btn.addEventListener('click', (e) => {
let delegateTarget = e.target.nextElementSibling
delegateTarget.classList.add('active');

for (let list of lists){
if(list!==delegateTarget){
list.classList.remove('active')
}
}


})
}
.wrap2{
  display: none;
}

.active {
  display: block;
}
<li class="section__top-nav-second-menu-item" id="list-initial-1">
                        <button class="second-menu-btn">
                            Реализм
                            <svg class="arrow-for-second-menu-btn" width="12" height="7" viewBox="0 0 12 7"
                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11 1L6 6L1 1" stroke="white" />
                            </svg>
                        </button>
                        <div class="wrap2" id="list-items">
                            <ul class="dop-list-items" data-simplebar>
                                <li class="dop-list-item list-img-1">
                                    <a href="#" class="dop-list-item-link">Тинторетто</a>
                                </li>
                                <li class="dop-list-item list-img-2">
                                    <a href="#" class="dop-list-item-link">Фридрих</a>
                                </li>
                                <li class="dop-list-item list-img-3">
                                    <a href="#" class="dop-list-item-link">Леонардо</a>
                                </li>
                                <li class="dop-list-item list-img-4">
                                    <a href="#" class="dop-list-item-link">Верроккьо</a>
                                </li>

                                <li class="dop-list-item list-img-1">
                                    <a href="#" class="dop-list-item-link">Тинторетто</a>
                                </li>
                                <li class="dop-list-item list-img-2">
                                    <a href="#" class="dop-list-item-link">Фридрих</a>
                                </li>
                                <li class="dop-list-item list-img-3">
                                    <a href="#" class="dop-list-item-link">Леонардо</a>
                                </li>
                                <li class="dop-list-item list-img-4">
                                    <a href="#" class="dop-list-item-link">Верроккьо</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="section__top-nav-second-menu-item" id="list-initial-1">
                        <button class="second-menu-btn">
                            Реализм
                            <svg class="arrow-for-second-menu-btn" width="12" height="7" viewBox="0 0 12 7"
                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11 1L6 6L1 1" stroke="white" />
                            </svg>
                        </button>
                        <div class="wrap2" id="list-items">
                            <ul class="dop-list-items" data-simplebar>
                                <li class="dop-list-item list-img-1">
                                    <a href="#" class="dop-list-item-link">Тинторетто</a>
                                </li>
                                <li class="dop-list-item list-img-2">
                                    <a href="#" class="dop-list-item-link">Фридрих</a>
                                </li>
                                <li class="dop-list-item list-img-3">
                                    <a href="#" class="dop-list-item-link">Леонардо</a>
                                </li>
                                <li class="dop-list-item list-img-4">
                                    <a href="#" class="dop-list-item-link">Верроккьо</a>
                                </li>

                                <li class="dop-list-item list-img-1">
                                    <a href="#" class="dop-list-item-link">Тинторетто</a>
                                </li>
                                <li class="dop-list-item list-img-2">
                                    <a href="#" class="dop-list-item-link">Фридрих</a>
                                </li>
                                <li class="dop-list-item list-img-3">
                                    <a href="#" class="dop-list-item-link">Леонардо</a>
                                </li>
                                <li class="dop-list-item list-img-4">
                                    <a href="#" class="dop-list-item-link">Верроккьо</a>
                                </li>
                            </ul>
                        </div>
                    </li>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.