点击左侧折叠标题时，如何同步切换右侧对应内容的is-active类？

你的原代码问题在于处理内容激活时，错误地给所有.collapsible-content添加类再移除兄弟元素的类，这会导致最后只有最后一个内容被激活，无法和点击的标题对应。以下是修改后的代码：

(function ($) {
  $(".collapsible-title").on("click", function () {
    // 重置所有激活状态：移除所有标题和内容的is-active类
    $(".collapsible-title, .collapsible-content").removeClass("is-active");
    
    // 给当前点击的标题添加激活类
    $(this).addClass("is-active");
    
    // 获取当前标题的索引，匹配对应位置的内容并添加激活类
    const titleIndex = $(this).index(".collapsible-title");
    $(".collapsible-content").eq(titleIndex).addClass("is-active");
  });
})(jQuery);

代码说明： #

• 第一步批量移除所有.collapsible-title和.collapsible-content的is-active类，确保点击新标题前所有元素都回到未激活状态。
• 给当前点击的标题单独添加is-active类，标记为激活状态。
• 通过index(".collapsible-title")获取当前标题在所有标题中的顺序位置，再用eq(titleIndex)找到对应位置的内容容器，添加激活类，实现标题和内容的一一对应。
• 补充了自执行函数末尾的(jQuery)参数，确保函数内部的$能正确指代jQuery对象，避免环境变量冲突。

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