如何实现jQuery手风琴单次仅展开一个？当前展开项无法关闭

先梳理原代码的几个核心问题：

• hasClass('.accordion-open') 写法错误：hasClass 参数仅需类名，不需要加前缀 .
• 逻辑混乱：未先统一关闭所有已展开项，反而用 toggleClass 导致多开；同时点击已展开的头部会关闭它，不符合需求
• closest('.accordion-entry, .accordion-image') 没必要同时匹配两个元素，头部的父元素应为 .accordion-entry，对应图片通过 data-target 关联即可

以下是修复后的完整代码：

$(document).ready(function () {
  // 给每个手风琴条目和对应图片绑定关联标识
  var accordionEntries = document.querySelectorAll('.accordion-entry');
  var accordionImages = document.querySelectorAll('.accordion-image'); 
  
  for (var i = 0; i < accordionEntries.length; i++) {
    accordionEntries[i].dataset.target = 'accordion-image-' + i;
    accordionImages[i].classList.add('accordion-image-' + i);
  }

  // 手风琴展开/切换逻辑
  $(document).on('click', '.accordion-header', function () {
    var currentEntry = $(this).closest('.accordion-entry');
    // 如果当前条目已经展开，点击不做任何操作
    if (currentEntry.hasClass('accordion-open')) {
      return;
    }
    // 关闭所有已展开的条目和对应图片
    $('.accordion-open').removeClass('accordion-open');
    // 展开当前条目和对应图片
    currentEntry.addClass('accordion-open');
    $('.' + currentEntry.data('target')).addClass('accordion-open');
  });
});

关键逻辑说明： #

• 点击头部时先判断当前条目是否已展开，若是则直接返回，实现已展开项点击自身不关闭的需求
• 若未展开，先移除所有带有 accordion-open 类的元素（包括条目和图片），确保每次仅展开一个
• 最后给当前条目和对应的图片添加展开类，完成切换

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