如何在同一页面实现多个jQuery slideToggle效果？附现有代码

我来帮你搞定同一页面多个slideToggle的问题～核心要点是让每个点击的标签只控制对应的面板，而不是所有面板一起触发。

第一步：确保HTML结构完整 #

你的HTML代码可以补全为（保证每个panel-tab后面紧跟对应的panel-stage）：

<div class="panel">
  <a href="#" class="panel-tab">Previous year papers of Bank Clerks<span>&#9660;</span></a>
  <div class="panel-stage" id="panel-stage-1">
    <a href="#">SBI Clerk 2008</a><br />
    <a href="#">Ibps Clerk 2015</a><br />
  </div>
  <a href="#" class="panel-tab">Previous Year Papers Of BHU CHS<span>&#9660;</span></a>
  <div class="panel-stage" id="panel-stage-2">
    <a href="#">BHU CHS 2020</a><br />
    <a href="#">BHU CHS 2019</a><br />
  </div>
</div>

第二步：编写jQuery代码 #

下面的代码会实现一对一的面板切换，还附带了箭头切换的交互优化：

$(document).ready(function() {
  // 可选：初始状态隐藏所有面板
  $('.panel-stage').hide();
  
  $('.panel-tab').click(function(e) {
    // 阻止a标签默认的跳转行为
    e.preventDefault();
    
    // 找到当前点击标签对应的面板（紧邻的下一个.panel-stage元素）
    const targetPanel = $(this).next('.panel-stage');
    
    // 切换目标面板的显示/隐藏
    targetPanel.slideToggle();
    
    // 切换箭头图标，提升用户体验
    $(this).find('span').text((_, currentText) => {
      return currentText === '▼' ? '▲' : '▼';
    });
    
    // 可选：点击一个面板时关闭其他所有面板
    // $('.panel-stage').not(targetPanel).slideUp();
    // $('.panel-tab').not(this).find('span').text('▼');
  });
});

关键代码解释 #

• $(this)：指向当前被点击的.panel-tab元素，确保我们操作的是用户点击的那个标签。
• .next('.panel-stage')：精准找到当前标签后面紧邻的面板，避免误操作其他面板。
• e.preventDefault()：阻止a标签默认的跳转行为，因为我们不需要跳转到#锚点。
• 箭头切换：通过修改span的文本，让用户直观看到面板的展开/收起状态。

如果需要点击一个面板时自动关闭其他面板，只需要把代码里的两行注释去掉就行～

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