如何用单一函数实现多组可折叠更新日志？-html教程-PHP中文网

如何用单一函数实现多组可折叠更新日志？

本文介绍一种基于 css 类选择器与语义化 html 结构的通用折叠方案，通过事件委托和 dom 遍历替代重复 id 与冗余函数，让新增版本条目无需修改 javascript 即可自动支持展开/收起交互。

本文介绍一种基于 css 类选择器与语义化 html 结构的通用折叠方案，通过事件委托和 dom 遍历替代重复 id 与冗余函数，让新增版本条目无需修改 javascript 即可自动支持展开/收起交互。

在构建版本更新日志等具备多个可折叠区块的页面时，初学者常采用为每个区块分配唯一 ID 并编写独立 JS 函数的方式（如 paraDrop1()、paraDrop2()）。这种写法虽能运行，但严重违背单一职责与可扩展性原则：每新增一个版本，就要复制 HTML 结构、新增 ID、补充两套函数——代码迅速膨胀，维护成本陡增。

更优解是转向基于类（class）的通用交互模式。核心思路是：
✅ 使用统一类名标识同类功能元素（如 .dropdown、.label、.content、.arrow）；
✅ 将交互逻辑绑定到结构关系而非具体 ID（例如“点击 label → 找到其父级 .dropdown → 切换 open 类”）；
✅ 由 CSS 控制状态样式（如 .dropdown.open .content { display: block; }），JS 仅负责状态切换。

以下是重构后的完整实现：



  <meta charset="UTF-8"><title>Update Log</title><style>
    p { display: none; } /* 此规则可移除，由 .content 统一控制 */
    header { text-align: center; }

    .dropdown {
      display: inline-block;
      margin-bottom: 1rem;
    }

    .label {
      display: inline-block;
      padding-right: 2px;
      border: 1px solid #000;
      font-size: 14pt;
      cursor: pointer;
      user-select: none;
    }

    .arrow {
      display: inline-block;
      transition: transform 0.2s ease;
    }

    .content {
      display: none;
      margin-top: 0.5rem;
      padding-left: 1rem;
      border-left: 2px solid #333;
    }

    .textHide {
      text-decoration: underline;
      color: #0066cc;
      cursor: pointer;
      margin-top: 0.5rem;
      display: block;
    }

    /* 开启状态样式 */
    .dropdown.open .arrow {
      transform: rotate(90deg);
    }
    .dropdown.open .content {
      display: block;
    }
  </style><header><h1>Update Log</h1>
  </header><!-- 版本 1 --><div title="Version 1 Updates">
    <div class="dropdown">
      <div class="label" onclick="toggleDropdown(this)">
        Version 1 <span class="arrow"> > </span>
      </div>
      <div class="content">
        <p>新增用户权限分级管理</p>
        <p>优化登录响应速度（平均降低 320ms）</p>
        <div class="textHide" onclick="toggleDropdown(this)">Hide Text</div>
      </div>
    </div>
  </div>

  <!-- 版本 2 -->
  <div title="Version 2 Updates">
    <div class="dropdown">
      <div class="label" onclick="toggleDropdown(this)">
        Version 2 <span class="arrow"> > </span>
      </div>
      <div class="content">
        <p>集成暗色主题支持</p>
        <p>修复导出 CSV 时中文乱码问题</p>
        <div class="textHide" onclick="toggleDropdown(this)">Hide Text</div>
      </div>
    </div>
  </div>

  <script>
    function toggleDropdown(trigger) {
      // 向上查找最近的 .dropdown 容器
      const dropdown = trigger.closest('.dropdown');
      if (!dropdown) return;

      // 切换 open 状态
      dropdown.classList.toggle('open');
    }
  </script>

关键改进说明：
? trigger.closest('.dropdown') —— 利用现代 DOM API 定位最近祖先容器，彻底摆脱 ID 依赖；
? 单函数 toggleDropdown() —— 同时处理“展开”与“收起”，逻辑简洁且幂等；
? CSS 驱动状态渲染 —— 所有显示/隐藏、旋转动画均由 CSS 类控制，JS 仅做状态管理；
? 语义化嵌套结构 —— 每个 .dropdown 是独立模块，新增版本只需复制 <div class="dropdown">...</div> 块，零 JS 修改。

注意事项：
⚠️ closest() 在 IE 中不被支持，如需兼容旧版浏览器，可用 parentNode 循环替代，或引入 polyfill；
⚠️ .textHide 元素必须位于 .content 内部，确保 closest('.dropdown') 能正确向上查找到容器；
⚠️ 推荐进一步升级为 事件委托（将监听绑定到），避免为每个 .label 和 .textHide 单独绑定事件，适用于动态添加内容场景。

此方案将维护复杂度从 O(n)（n 为版本数）降至 O(1)，真正实现“写一次，复用无限”。