无需使用ID实现按钮仅作用于所在父区块的JS脚本方案

这问题我熟！要让每个按钮只操控自己所在的区块，完全不用getElementById，核心是利用事件对象和DOM节点关系来精准定位目标元素，比用ID的方式更灵活，批量生成的区块也能自动生效。咱们一步步来实现：

1. 先调整HTML结构（统一用类名标识） #

给每个区块、按钮、可展开内容都加上通用类名，不用再写唯一ID：

<!-- 第一个区块 -->
<div class="text-block">
  <button class="toggle-btn">展开/收起</button>
  <div class="toggle-text">
    这里是第一个区块的隐藏内容，点击按钮就能展开啦～
  </div>
</div>

<!-- 第二个区块 -->
<div class="text-block">
  <button class="toggle-btn">展开/收起</button>
  <div class="toggle-text">
    这是第二个区块的专属内容，只会被自己的按钮控制哦！
  </div>
</div>

2. 编写JavaScript逻辑（事件委托+节点定位） #

推荐用事件委托来绑定事件，不用给每个按钮单独加监听，性能更优：

// 给整个文档绑定点击事件，监听按钮点击
document.addEventListener('click', function(e) {
  // 先判断点击的是不是咱们的切换按钮
  if (e.target.classList.contains('toggle-btn')) {
    // 关键1：找到当前按钮所在的父区块（向上找最近的.text-block）
    const currentBlock = e.target.closest('.text-block');
    // 关键2：在当前区块内找到要切换的内容元素
    const targetContent = currentBlock.querySelector('.toggle-text');
    
    // 用类名切换状态（比直接操作style更易维护）
    currentBlock.classList.toggle('expanded');
    targetContent.classList.toggle('expanded');
  }
});

3. 补充CSS样式（用类名控制展开/收起状态） #

用CSS类来控制高度和显示状态，比直接修改元素style更符合语义化，也方便调整动画效果：

/* 默认收缩状态的区块 */
.text-block {
  height: 100px;
  overflow: hidden;
  transition: height 0.3s ease; /* 加上过渡动画更丝滑 */
  border: 1px solid #eee;
  padding: 10px;
  margin: 10px 0;
}

/* 展开状态的区块 */
.text-block.expanded {
  height: auto;
}

/* 默认收缩状态的内容 */
.toggle-text {
  height: 60px;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* 展开状态的内容 */
.toggle-text.expanded {
  height: auto;
}

核心知识点解释 #

• e.target：获取当前被点击的元素，也就是触发事件的按钮
• closest('.text-block')：向上遍历DOM树，找到最近的带有text-block类的父元素，精准锁定按钮所在的区块，不会影响其他区块
• querySelector('.toggle-text')：只在当前区块内查找目标内容，确保每个按钮只操作自己的“专属内容”
• 用类名切换状态：相比直接修改style，类名更易维护，还能轻松添加动画、改变样式等

这样不管你有多少个区块，只要结构统一，按钮都会自动控制自己所在的区块，完全不用写一堆重复的ID和函数！

内容的提问来源于stack exchange，提问作者Алексей Шевченко