如何实现点击按钮切换父级ul元素的display类

要实现点击按钮时仅让对应父级.ul元素激活（添加.display类），同时取消其他.ul的激活状态，可以按以下方式修改代码：

完整代码示例 #

HTML #

<div class="ul">
  <div class="li">
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
    <div class="btn">Click me</div>
  </div>  
</div>
<br>
<div class="ul">
  <div class="li">
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
  </div>  
</div>
<br>
<div class="ul">
  <div class="li">
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
    <div class="btn">Click me</div>
  </div>  
</div>

<div class="ul">
  <div class="li">
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
    <div class="li a">List Link</div>
    <div class="btn">Click me</div>
  </div>  
</div>

CSS #

.btn {
  background: yellow;
  cursor: pointer; /* 添加鼠标指针，提示可点击 */
}
.ul {
  padding: 10px;
  border: 1px solid #ddd;
  transition: .33s ease all;
}
.ul.display {
  background: green;
  color: white; /* 添加文字颜色，提升可读性 */
}

JavaScript #

const btns = document.querySelectorAll(".btn");
const allUl = document.querySelectorAll(".ul");

btns.forEach(btn => {
  btn.addEventListener("click", function(e) {
    // 获取当前按钮对应的父级.ul元素
    const targetUl = e.currentTarget.closest(".ul");
    // 检查当前元素是否已激活
    const isActive = targetUl.classList.contains("display");

    // 先移除所有.ul的display类，确保全局唯一激活状态
    allUl.forEach(ul => ul.classList.remove("display"));

    // 如果当前未激活，则添加类；已激活则保持移除状态（取消激活）
    if (!isActive) {
      targetUl.classList.add("display");
    }
  });
});

代码说明 #

1. closest(".ul")：相比链式调用parentElement，这个方法更鲁棒，哪怕DOM结构调整，只要目标父级带有.ul类就能正确获取。
2. 全局清空激活状态：点击按钮时先移除所有.ul的.display类，保证同一时间最多只有一个激活元素。
3. 双向切换逻辑：点击已激活的按钮会取消其状态；点击未激活的按钮则激活它，并自动取消其他元素的激活状态。

内容的提问来源于stack exchange，提问作者r1c04111995