如何优化Div显示/隐藏功能，实现多模块代码复用

问题根源 #

你之前的代码依赖唯一ID，当多个模块重复使用相同ID时，getElementById只会返回第一个匹配元素，导致后续模块功能失效。另外，使用for循环时如果没有正确关联当前点击元素与对应内容容器，也会导致动画和展示功能异常。

解决方案：类选择器 + 元素关联查找 #

将所有ID替换为类选择器，通过相对当前点击元素的查找，确保每个箭头只操作所属模块的内容容器。

修改后的完整代码 #

HTML（支持多个模块）

<!-- 父容器可选，用于事件委托优化 -->
<div class="modules-container">
  <!-- 模块1 -->
  <div class="module-sub container">
    <div class="d-flex justify-content-between">
      <div class="module-heading">EXCEL</div>
      <div class="module-arrow">&#9660;</div>
    </div>
    <div class="content-container">
      <div class="content mod-content">
        <ul>
          <li>Excel Basics</li>
          <li>Excel Essentials</li>
          <li>Formulae</li>
          <li>Data Analysis</li>
          <li>Charts</li>
          <li>Pivot Tables</li>
          <li>Lookup</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 模块2 -->
  <div class="module-sub container">
    <div class="d-flex justify-content-between">
      <div class="module-heading">WORD</div>
      <div class="module-arrow">&#9660;</div>
    </div>
    <div class="content-container">
      <div class="content mod-content">
        <ul>
          <li>Formatting</li>
          <li>Styles</li>
          <li>Mail Merge</li>
          <li>Tables</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS（替换ID为类选择器）

.content-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

.content {
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.module-arrow {
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.3s ease-out;
}

JavaScript（两种实现方式）

方式1：遍历绑定事件（适合模块数量较少的场景）

document.addEventListener('DOMContentLoaded', function () {
  // 获取所有箭头元素
  const arrows = document.querySelectorAll('.module-arrow');
  
  arrows.forEach(arrow => {
    arrow.addEventListener('click', function () {
      // 找到当前模块的内容容器和内容
      const module = this.closest('.module-sub');
      const contentContainer = module.querySelector('.content-container');
      const content = contentContainer.querySelector('.content');
      
      // 切换展开/折叠状态
      if (contentContainer.style.maxHeight) {
        contentContainer.style.maxHeight = null;
        this.style.transform = 'rotate(0deg)';
      } else {
        contentContainer.style.maxHeight = content.scrollHeight + 'px';
        this.style.transform = 'rotate(180deg)';
      }
    });
  });
});

方式2：事件委托（适合大量模块，性能更优）

document.addEventListener('DOMContentLoaded', function () {
  // 监听父容器的点击事件，通过事件冒泡判断点击目标
  document.querySelector('.modules-container').addEventListener('click', function (e) {
    if (e.target.classList.contains('module-arrow')) {
      const arrow = e.target;
      const module = arrow.closest('.module-sub');
      const contentContainer = module.querySelector('.content-container');
      const content = contentContainer.querySelector('.content');
      
      // 切换展开/折叠状态
      if (contentContainer.style.maxHeight) {
        contentContainer.style.maxHeight = null;
        arrow.style.transform = 'rotate(0deg)';
      } else {
        contentContainer.style.maxHeight = content.scrollHeight + 'px';
        arrow.style.transform = 'rotate(180deg)';
      }
    }
  });
});

关键要点 #

• 类选择器替代ID：避免ID重复导致的元素选择错误
• 相对查找元素：使用closest('.module-sub')定位当前模块，再通过querySelector查找内部元素，确保操作的是当前模块的内容
• 事件委托优化：当模块数量较多时，事件委托只需绑定一个事件，比遍历绑定更高效

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