如何使用jQuery按类切换相邻元素显隐 多重复结构不使用ID

问题原因 #

你的代码定位逻辑错误：.summary和.details是.innerContainer的子元素，而你使用的.next()方法只能查找同级相邻的后序元素，永远无法定位到嵌套在innerContainer内部的目标元素，所以没有执行效果。

修正后代码 #

$(".buttonClass").click(function() {
    // 定位当前按钮对应的innerContainer容器
    const $targetContainer = $(this).next(".innerContainer");
    // 切换容器内两个子元素的显示状态
    $targetContainer.find(".summary, .details").toggle();
});

原有CSS和HTML结构无需修改即可生效，该写法只会操作当前点击按钮对应的那一组元素，不会影响页面上其他同类结构。

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