如何精简9组Toggle与Panel对应的重复jQuery代码？

嘿，作为前端新手能察觉到代码重复并想要优化，这真的很棒！你的场景非常典型——当多个元素结构、功能完全一致时，重复写9次几乎一样的事件绑定完全没必要，下面给你两种易上手的精简方案，从语义化到兼容现有HTML都有：

方案一：用类选择器+DOM结构关联（推荐，更语义化） #

这种方法只需要给所有相同功能的元素添加统一的类，然后利用它们的父容器关系来找到对应的面板，不管你以后加多少组，代码都不用改。

第一步：修改HTML结构 #

把原来的id换成类（保留col容器不变）：

<div class="col">
  <h2 class="toggle-btn"></h2>
  <ul class="panel">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="col">
  <h2 class="toggle-btn"></h2>
  <ul class="panel">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<!-- 剩下的6组也按这个格式修改 -->

第二步：精简后的jQuery代码 #

$(document).ready(function(){
  // 给所有toggle-btn绑定点击事件
  $(".toggle-btn").click(function(){
    // 逻辑：找到当前点击按钮所在的col容器，再选中里面的panel
    $(this).closest(".col").find(".panel").slideToggle("fast");
  });
});

代码解释 #

• $(this)：指代当前被点击的那个toggle按钮
• .closest(".col")：向上查找最近的父级col容器（确保只操作当前组的面板，不会影响其他组）
• .find(".panel")：在找到的col容器里，选中对应的面板元素
• 整个逻辑只需要绑定一次事件，所有toggle按钮都会生效

方案二：保留现有ID，通过提取数字关联（不用大改HTML） #

如果你不想修改太多现有HTML结构，可以利用ID里的数字来匹配对应的面板：

直接使用以下jQuery代码 #

$(document).ready(function(){
  // 选中所有ID以"toggle"开头的元素
  $("[id^='toggle']").click(function(){
    // 从当前元素的ID里提取数字部分（比如从toggle1拿到1）
    const panelNumber = $(this).attr("id").replace("toggle", "");
    // 拼接对应的panel ID并执行滑动切换
    $(`#panel${panelNumber}`).slideToggle("fast");
  });
});

代码解释 #

• $("[id^='toggle']")：CSS属性选择器，匹配所有ID以toggle开头的元素
• .replace("toggle", "")：把ID里的"toggle"去掉，得到对应的数字编号
• 用模板字符串#panel${panelNumber}拼接出目标面板的ID，实现关联

为什么要这样精简？ #

• 维护成本低：以后要修改动画速度、切换逻辑，只需要改一处代码
• 扩展性强：新增第10组、第11组时，只需要复制HTML结构，不用再写新的事件绑定
• 代码更整洁：避免冗余代码，可读性更强

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