Ich habe mehrere Dropdown-Elemente in meiner Fu?zeile. Ich m?chte die ?aktive“ Klassenliste speziell für das angeklickte Element umschalten. Mein Code lautet bisher:
Ich habe mehrere Beh?lter wie diesen:
let dropDowns = document.querySelectorAll('.footer-arrow-container') let dropDownList = document.querySelector('.footer-items-list') dropDowns.forEach((dropDown) => { dropDown.addEventListener('click', () => { dropDownList.closest('ul').classList.toggle('active') }) })
.footer-items-list { display: none; } .active { display: flex; }
<div class="footer-item-container"> <div class="footer-arrow-container"> <!-- dropDowns ; querySelectorAll --> <h2 class="footer-item-title"> Test </h2> <img/> </div> <div class="footer-dropdown-list-container"> <ul class="footer-items-list"> <!-- dropDownList : querySelector --> <li>List item 1</li> <li>List item 2</li> </ul> </div> </div> <div class="footer-item-container"> <div class="footer-arrow-container"> <!-- dropDowns ; querySelectorAll --> <h2 class="footer-item-title"> Test </h2> <img/> </div> <div class="footer-dropdown-list-container"> <ul class="footer-items-list"> <!-- dropDownList : querySelector --> <li>List item 1</li> <li>List item 2</li> </ul> </div> </div>
Derzeit w?hlt dies nur ?ul“ aus der ersten Liste aus. Es funktioniert nicht mit separaten anderen Listen, daher habe ich es in JavaScript offensichtlich falsch ausgew?hlt und bin mir nicht sicher, wie ich das am besten machen soll.
HTML 結構不清楚。我相信您的話,每個頁腳項目都具有相同的結構,并在此示例中放置了兩個。基本上,代碼向上到共同祖先,然后向下到子級。
let dropDowns = document.querySelectorAll('.footer-arrow-container') dropDowns.forEach((dropDown) => { dropDown.addEventListener('click', () => { dropDown.closest('.footer-item-container').querySelector('.footer-items-list').classList.toggle('active') }) })
.footer-items-list { display: none; } .active { display: flex; }