选择父元素的子元素

问题描述

我想在（'.nav-dropdown'）类的父级中选择一个（'.nav-dropdown-content'）类的div，以在该子级上添加.active类，看看我的代码 我的功能无法正常工作，我该如何选择那个孩子？

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

解决方法

选择最后一个元素，为其添加一个侦听器，切换类

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>

,

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

因此，您可以通过单击外部DIV来激活活动类的内部DIV

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>