如何修改JS Accordion实现仅开合自身区块不联动关闭其他

所有联动闭合效果的根源，都是原点击事件中加入了「先批量关闭全量手风琴区块，再打开当前点击项」的逻辑，需要做的调整全部围绕切断全量操作展开：

• 删除原有交互代码中，所有针对手风琴全量元素的批量清理逻辑。常见触发联动的代码包括：点击头部执行$('.accordion-content').slideUp()、执行$('.accordion-item').removeClass('active')这类不做范围限制的全局选择器操作，这部分代码是产生联动的核心，需要全部移除。
• 收窄DOM操作的选择器范围。把原本针对整个手风琴容器内所有元素的类名修改、动画触发，调整为仅操作当前点击头部所属的单个区块，不触碰同组内其他独立区块的DOM状态。
• 替换原有的“关所有-开当前”执行流程，改为仅对当前点击区块执行开合状态切换，使用slideToggle()、toggleClass()这类无副作用的切换方法，避免触发其他区块的状态变更。

原带联动效果的问题代码 #

$('.accordion-header').on('click', function() {
  // ---- 以下为触发联动的问题代码，需要移除 ----
  $('.accordion-item').removeClass('open');
  $('.accordion-content').slideUp();
  // ---- 问题代码结束 ----

  // 原有针对当前项的打开逻辑可保留，但可优化为切换模式
  $(this).closest('.accordion-item').addClass('open');
  $(this).siblings('.accordion-content').slideDown();
})

调整后的独立开合代码 #

$('.accordion-header').on('click', function() {
  // 仅定位当前点击元素所属的手风琴区块，不向外遍历
  const $currentItem = $(this).closest('.accordion-item');
  // 仅对当前区块内部的内容区做状态切换，不影响其他区块
  $currentItem.toggleClass('open');
  $currentItem.find('.accordion-content').slideToggle();

注意：原有CSS样式不需要做任何修改，只要交互逻辑不再批量修改其他区块的类名、触发其他区块的动画，手风琴就会变为每个区块独立开合的效果，点击其他区块时不会自动收起已展开的内容。

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