select 父元素的子元素

Question

I want to select one div with ('.nav-dropdown-content') class in parent with ('.nav-dropdown') class to add.active class on the that child look at my code my function doesn't work correctly我怎么能select那个孩子？

<div class="nav-item nav-dropdown">
  <a class="nav-link" href="#">Parent</a>
  <div class="nav-dropdown-content">
    <a class="dropdown-link" href="#">link</a>
    <a class="dropdown-link" href="#">link</a>
    <a class="dropdown-link" href="#">link</a>
    <a class="dropdown-link" href="#">link</a>
  </div>
</div>

var navDropDown = document.querySelectorAll('.nav-dropdown');
for (let i = 0 ; i < navDropDown.length ; i++) {
    navDropDown[i].addEventListener('click', () => {
        navDropDown[i].lastChild.addEventListener.classList.toggle('active');
    })
}

Answer 1

选择最后一个元素，附加一个监听器，切换 class

 document.querySelector('.nav-dropdown-content:last-child').addEventListener('click', (e) => { e.target.classList.toggle('active'); })

 .active { background: yellow; }

 <div class="nav-item nav-dropdown"> <a class="nav-link" href="#">Parent</a> <div class="nav-dropdown-content"> <a class="dropdown-link" href="#">link</a> <a class="dropdown-link" href="#">link</a> <a class="dropdown-link" href="#">link</a> <a class="dropdown-link" href="#">link</a> </div> </div>

Answer 2

你需要： navDropDown[i].lastElementChild.classList.toggle('active');

因此，您可以通过单击外部 DIV 来切换内部 DIV 与活动 class

 var navDropDown = document.querySelectorAll('.nav-dropdown'); for (let i = 0; i < navDropDown.length; i++) { navDropDown[i].addEventListener('click', () => { navDropDown[i].lastElementChild.classList.toggle('active'); }) }

 .active { background: yellow; }

 <div class="nav-item nav-dropdown"> <a class="nav-link" href="#">Parent</a> <div class="nav-dropdown-content"> <a class="dropdown-link" href="#">link</a> <a class="dropdown-link" href="#">link</a> <a class="dropdown-link" href="#">link</a> <a class="dropdown-link" href="#">link</a> </div> </div>