jQuery点击.butopenclose切换.openclose：嵌套元素失效问题求助

你遇到的问题核心是选择器定位错误——.openclose并不是你点击的.butopenclose的同级元素，而是它父级.row1的下一个兄弟元素。外层能工作可能是巧合，但嵌套结构下原选择器就找不到目标内容区了。

修正后的代码 #

把你的点击事件处理代码改成下面这样，就能完美适配嵌套结构：

$(document.body).on('click', '.butopenclose', function () {
  // 先找到当前点击元素所属的最近.row1容器，再选中它的下一个.openclose兄弟
  $(this).closest('.row1').next(".openclose").slideToggle();
});

原理说明 #

• closest('.row1')：从点击的.butopenclose元素开始向上遍历DOM树，找到最近的带有.row1类的父元素。这个方法会自动适配任意深度的嵌套，不管你的折叠面板套了多少层，都能精准定位到当前点击项对应的容器。
• next(".openclose")：定位到.row1之后，选择它紧挨着的下一个同级.openclose元素——这就是你需要展开/折叠的目标内容区。

为什么之前的尝试没成功？ #

如果你之前用parent()配合closest()出错，大概率是因为parent()只能获取直接父元素，要是DOM结构里有额外的包裹层（比如你代码里带padding的div），它就没法直接定位到.row1。而closest()会一直向上查找直到找到匹配元素，比parent()更灵活可靠。

另外提个小建议：你HTML里重复使用了id="grupo"和id="icon"，ID在整个页面里必须是唯一的，建议改成类名（比如class="grupo"、class="icon"），避免后续出现奇怪的DOM操作问题。

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