国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Wie kann ich die Klassenliste eines Menüelements mithilfe von JavaScript individuell umschalten?
P粉949848849
P粉949848849 2024-02-17 17:22:12
0
1
465

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.

P粉949848849
P粉949848849

Antworte allen(1)
P粉510127741

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;
}

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage