如何使用JavaScript在点击按钮时选中对应同级相邻div元素

直接使用原生DOM的nextElementSibling属性即可实现不依赖类名的同级相邻元素选取，该属性会返回当前节点之后紧邻的同层级元素节点，自动忽略换行、缩进等空白文本节点，完全匹配你的需求。

完整代码示例 #

// 给所有collapsible按钮绑定点击事件
document.querySelectorAll('.collapsible').forEach(button => {
  button.addEventListener('click', function() {
    // 直接获取当前按钮后紧邻的同级div元素，无需类名匹配
    const adjacentDiv = this.nextElementSibling;
    // 示例：切换元素显隐，可替换为你需要的其他操作
    adjacentDiv.style.display = adjacentDiv.style.display === 'none' ? 'block' : 'none';
  });
});

补充说明 #

• 如果你的项目中使用箭头函数绑定事件，需要将this替换为e.currentTarget，示例如下：

document.querySelectorAll('.collapsible').forEach(button => {
  button.addEventListener('click', (e) => {
    const adjacentDiv = e.currentTarget.nextElementSibling;
    // 后续操作逻辑
  });
});

• 若未来DOM结构调整，按钮后新增了其他同级元素，你可以搭配nextElementSibling连续调用、或者Element.closest()获取父级后再指定子元素索引的方式适配，当前你给出的结构下直接调用nextElementSibling即可精准获取目标div。

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