点击子按钮为父Div添加active切换类（原生JavaScript实现）

你可以通过以下步骤实现，无需依赖ID，完美适配多个重复区块：

1. 选中所有切换按钮：用类选择器document.querySelectorAll('.toggle-class-button')获取页面中所有目标按钮。
2. 绑定点击事件：遍历每个按钮，为它们添加点击事件监听。
3. 定位父级div：点击按钮时，通过closest('.parent-div')找到按钮所在的最近父级.parent-div元素（这个方法比parentNode更灵活，即使后续DOM结构微调也能精准定位）。
4. 切换active类：调用元素的classList.toggle('active')方法，自动实现添加/移除active类的切换效果。

完整代码示例 #

HTML（你的示例代码可直接使用）

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Toggle "active" class on parent div</button>
</div>

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Toggle "active" class on parent div</button>
</div>

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Toggle "active" class on parent div</button>
</div>

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Toggle "active" class on parent div</button>
</div>

JavaScript代码

// 获取所有切换按钮
const toggleButtons = document.querySelectorAll('.toggle-class-button');

// 遍历按钮并绑定点击事件
toggleButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 找到当前按钮对应的父级.parent-div
    const parentDiv = this.closest('.parent-div');
    // 切换active类
    parentDiv.classList.toggle('active');
  });
});

补充说明 #

• closest()方法从当前元素向上遍历DOM树，返回第一个匹配指定选择器的祖先元素，适配各种嵌套结构的元素定位需求。
• classList.toggle()会自动判断元素是否包含目标类：存在则移除，不存在则添加，无需额外判断逻辑。
• 若需兼容IE11及以下老旧浏览器，可为closest()和classList添加polyfill，现代浏览器已原生支持这些API。

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