如何阻止jQuery Accordion点击时全部展开，仅展开点击项

嗨，我帮你排查下这个手风琴组件的问题～你现在遇到的所有面板同时展开/收起的情况，核心原因是你的代码操作了所有的.vpm-content-tab面板，而不是和当前点击标题对应的那一个。

问题分析 #

你原代码里用了$("#toggle>div.vpm-content-tab")这种选择器，它会选中#toggle下所有的面板元素。所以当你点击任意一个标题时，代码会对所有面板执行展开/收起操作，自然就出现了所有面板同时变化的情况。

解决方案 #

我们需要精准定位到当前点击标题对应的面板，只对它进行状态切换，同时关闭其他已展开的面板（如果需要单面板展开的话）。

步骤1：确保HTML结构合理

假设你的HTML结构是标题和面板一一对应的格式：

<div id="toggle">
  <h4 class="vpm-tab-index">标题1</h4>
  <div class="vpm-content-tab closed">面板内容1</div>
  
  <h4 class="vpm-tab-index">标题2</h4>
  <div class="vpm-content-tab closed">面板内容2</div>
  
  <h4 class="vpm-tab-index">标题3</h4>
  <div class="vpm-content-tab closed">面板内容3</div>
</div>

步骤2：用CSS管理显示状态（推荐）

先通过CSS定义面板的显示/隐藏，避免直接在JS里操作display属性，代码更清晰易维护：

.vpm-content-tab.closed {
  display: none;
}
.vpm-content-tab.opened {
  display: block;
}

步骤3：修改JS代码，精准操作当前面板

$("#toggle>h4.vpm-tab-index").on("click", function(e) {
  e.stopPropagation();
  
  // 1. 获取当前点击标题对应的面板（用next()找到相邻的下一个面板元素）
  const $currentPanel = $(this).next('.vpm-content-tab');
  
  // 2. 关闭其他已展开的面板（如果允许多面板同时展开，可删掉这一步）
  $('.vpm-content-tab.opened').not($currentPanel).removeClass('opened').addClass('closed');
  
  // 3. 切换当前面板的状态
  $currentPanel.toggleClass('closed opened');
});

代码解释 #

• $(this).next('.vpm-content-tab')：this指代当前被点击的h4标题，next()会找到它相邻的下一个面板元素，精准定位目标面板。
• $('.vpm-content-tab.opened').not($currentPanel)：选中所有已展开的面板，排除当前点击的面板，然后切换类来关闭它们。
• toggleClass('closed opened')：一键切换面板的状态类，配合CSS自动控制显示/隐藏。

如果不需要强制单面板展开（允许多个面板同时打开），只需要删掉第2步的代码即可。

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