获取具有类的下一个元素（不是子元素或兄弟元素）

Question

按一下按钮，我想切换.active下一个课程div.bottom。这些基本上是手风琴，但结构不同。
使用nextElementSibling我想在这里无法选择目标元素。如何选择这样一个元素，它既不是子元素也不是兄弟元素（在普通的 JS 中）？

<div class="wrapper">
  <div class="top">
    <div class="inner">
      <div><button></button></div>
    </div>
  </div>
  <div class="bottom"></div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="inner">
      <div><button></button></div>
    </div>
  </div>
  <div class="bottom"></div>
</div>

Answer 1

我会通过使用closest转到容器.wrapper元素，然后querySelector找到该bottom元素来完成此操作：

function onClick(event) {
    const wrapper = event.target.closest(".wrapper");
    const bottom = wrapper && wrapper.querySelector(".bottom");
    if (bottom) {
        bottom.classList.toggle("active");
    }
}

实例：

function onClick(event) {
    const wrapper = event.target.closest(".wrapper");
    const bottom = wrapper && wrapper.querySelector(".bottom");
    if (bottom) {
        bottom.classList.toggle("active");
    }
}

// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
    const button = event.target.closest(".inner button");
    const wrapper = button && button.closest(".wrapper");
    const bottom = wrapper && wrapper.querySelector(".bottom");
    if (bottom) {
        bottom.classList.toggle("active");
    }
});

.active {
    color: blue;
    border: 1px solid black;
}

或者使用可选链进行相同的操作（相对较新）：

function onClick(event) {
    const wrapper = event.target.closest(".wrapper");
    const bottom = wrapper?.querySelector(".bottom");
    bottom?.classList.toggle("active");
}

实例：

<div class="wrapper">
        <div class="top">
                <div class="inner">
                        <div><button>Button A</button></div>
                </div>
        </div>
        <div class="bottom">Bottom A</div>
</div>

<div class="wrapper">
        <div class="top">
                <div class="inner">
                        <div><button>Button B</button></div>
                </div>
        </div>
        <div class="bottom">Bottom B</div>
</div>

function onClick(event) {
    const wrapper = event.target.closest(".wrapper");
    const bottom = wrapper?.querySelector(".bottom");
    bottom?.classList.toggle("active");
}

// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
    const button = event.target.closest(".inner button");
    const wrapper = button?.closest(".wrapper");
    const bottom = wrapper?.querySelector(".bottom");
    bottom?.classList.toggle("active");
});