改进slideToggle jQuery代码：实现可折叠列表点击展开/折叠功能

我来帮你优化这个可折叠列表的jQuery代码，让它更灵活易用，不用再依赖特定的toggle4类名啦！先看调整后的结构和代码：

调整后的HTML结构 #

我把标题和对应折叠内容做了更清晰的关联，统一用通用类名替代零散的toggle1/toggle2，后续新增折叠项时不用再改类名：

<div class="collapsible-group">
  <h3 class="toggle-heading">
    <a href="#">Example 1 CC</a>
  </h3>
  <div class="collapsible-content">
    <ul>
      <li class="lib1"><a href="#">Community College</a></li>
      <li class="lib1"><a href="#">Community College - Online</a></li>
    </ul>
  </div>

  <h3 class="toggle-heading">
    <a href="#">Example 2 Other Category</a>
  </h3>
  <div class="collapsible-content">
    <ul>
      <li class="lib1"><a href="#">Other Item</a></li>
      <li class="lib1"><a href="#">Other Online Item</a></li>
    </ul>
  </div>
</div>

优化后的jQuery代码 #

这个版本扩展性拉满，不管你加多少个折叠项，都不用修改JS代码：

$(document).ready(function() {
  // 初始化：默认隐藏所有折叠内容（需默认展开的项，给对应content加.show类）
  $('.collapsible-content').not('.show').hide();

  // 绑定点击事件到所有折叠标题
  $('.toggle-heading').click(function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();

    // 精准定位当前标题对应的折叠内容
    const $targetContent = $(this).next('.collapsible-content');

    // 切换展开/折叠动画
    $targetContent.slideToggle('fast');

    // 给标题添加状态类，方便做样式区分（比如箭头翻转）
    $(this).toggleClass('expanded');

    // 【可选功能】点击当前项时自动折叠其他展开的内容
    // $('.collapsible-content').not($targetContent).slideUp('fast');
    // $('.toggle-heading').not(this).removeClass('expanded');
  });
});

代码细节说明 #

• 通用类设计：用.toggle-heading和.collapsible-content统一标记元素，新增折叠项时直接复用类名即可，不用维护一堆零散的toggleN类。
• 精准关联内容：通过.next()方法找到当前标题的下一个折叠内容，结构变动时也不容易出错。
• 样式反馈：给展开的标题加.expanded类，你可以用CSS做视觉区分，比如：

  .toggle-heading.expanded a::after {
    content: ' ↑';
  }
  .toggle-heading a::after {
    content: ' ↓';
  }
  

• 灵活初始化：需要默认展开的项，只需给对应的.collapsible-content加.show类即可。

这样改完之后，你的可折叠列表功能会更稳定、易维护，新增分类也不用再折腾JS代码啦！

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