实现手风琴（Accordion）组件单项展开功能教程

本教程详细介绍了如何使用纯 javascript 和 css 实现一个手风琴（accordion）组件，并确保在任何时候都只有一项内容面板处于展开状态。通过事件委托机制，我们能够高效地管理多个手风琴项的展开与收起逻辑，避免了传统为每个元素单独绑定事件的性能开销，同时提供了清晰的代码示例和实现细节。

手风琴（Accordion）组件概述

手风琴组件是一种常见的UI模式，用于在有限的空间内展示大量内容。它通常由一系列可点击的标题（按钮）和与之关联的内容面板组成。点击标题时，对应的内容面板会展开或收起。本教程的目标是实现一种“单项展开”模式，即当一个面板展开时，所有其他已展开的面板会自动收起。

初始多项展开的实现及问题

在默认实现中，通常会遍历所有手风琴按钮，并为每个按钮绑定一个点击事件。当按钮被点击时，它会切换自身的状态（例如添加或移除一个CSS类）并根据内容面板的当前高度来展开或收起。

以下是最初的多项展开JavaScript实现示例：

const accordians = document.getElementsByClassName("accordion_btn");
for (var i = 0; i < accordians.length; i += 1) {
  accordians[i].onclick = function() {
    this.classList.toggle('arrowClass'); // 切换箭头图标
    var content = this.nextElementSibling; // 获取相邻的内容面板

    if (content.style.maxHeight) {
      // 如果已展开，则收起
      content.style.maxHeight = null;
    } else {
      // 如果已收起，则展开
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

这种方法的问题在于，每个手风琴项都是独立操作的。当用户点击一个按钮时，它只会改变自身的状态，而不会影响其他手风琴项。因此，多个手风琴面板可以同时保持展开状态，这在某些设计场景下可能不是期望的行为。

实现单项展开的核心思路

要实现手风琴组件的单项展开功能，核心思想是：当一个手风琴面板被点击并展开时，必须确保所有其他手风琴面板都处于收起状态。 我们可以通过以下步骤来实现这一目标：

1. 事件委托： 不为每个手风琴按钮单独绑定事件，而是为它们共同的父元素绑定一个事件监听器。利用事件冒泡机制，当任何一个手风琴按钮被点击时，父元素上的监听器都能捕获到事件。
2. 识别目标： 在事件处理函数中，判断触发事件的元素（event.target）是否为手风琴按钮。
3. 关闭其他： 在展开当前点击的手风琴面板之前，遍历所有的手风琴按钮及其对应的内容面板，将它们全部收起并移除相关的CSS类。
4. 展开当前： 最后，再根据当前点击的按钮，切换其内容面板的展开/收起状态。

这种方法不仅解决了单项展开的问题，还通过事件委托优化了性能，特别是当页面中手风琴项数量较多时。

JavaScript 解决方案

我们将修改原有的JavaScript代码，采用事件委托并加入“关闭其他”的逻辑。

DreamStudio

SD兄弟产品！AI 图像生成器

下载

// 获取所有手风琴按钮的集合
let accordionButtons = document.querySelectorAll('.accordion_btn');

// 为共同的父元素 `main` 添加一个委托事件监听器
document.querySelector('main').addEventListener('click', e => {
  // 检查点击事件的目标是否是手风琴按钮
  if (e.target.classList.contains('accordion_btn')) {

    // 遍历所有手风琴按钮，关闭非当前点击的面板
    accordionButtons.forEach(button => {
      // 如果当前遍历到的按钮不是被点击的按钮
      if (button !== e.target) {
        // 关闭其相邻的内容面板
        button.nextElementSibling.style.maxHeight = null;
        // 移除其箭头方向类
        button.classList.remove('arrowClass');
      }
    });

    // 切换当前被点击按钮的内容面板状态
    let content = e.target.nextElementSibling;
    // 判断内容面板是否已完全展开，如果是则收起，否则展开
    content.style.maxHeight = parseFloat(content.style.maxHeight) === parseFloat(content.scrollHeight) ? null : content.scrollHeight + "px";

    // 切换当前被点击按钮的箭头方向类
    e.target.classList.toggle('arrowClass');
  }
});

代码解析：

• document.querySelectorAll('.accordion_btn')：获取页面上所有具有 accordion_btn 类的元素，返回一个 NodeList。
• document.querySelector('main').addEventListener('click', e => { ... })：将点击事件监听器绑定到 main 元素上。e 是事件对象。
• e.target.classList.contains('accordion_btn')：判断实际触发点击事件的元素是否是我们想要处理的手风琴按钮。
• accordionButtons.forEach(button => { ... })：遍历所有手风琴按钮。
• if (button !== e.target)：这是实现单项展开的关键。它确保我们不会去关闭当前正在被点击的那个面板。
• button.nextElementSibling.style.maxHeight = null;：将非当前点击面板的 maxHeight 设置为 null，使其收起。
• button.classList.remove('arrowClass');：移除非当前点击面板按钮的 arrowClass，重置箭头方向。
• parseFloat(content.style.maxHeight) === parseFloat(content.scrollHeight)：这是一个更健壮的判断内容面板是否已完全展开的方法。content.scrollHeight 是元素内容完全显示所需的高度。
• e.target.classList.toggle('arrowClass');：切换当前点击按钮的 arrowClass，以改变箭头方向。

HTML 结构

手风琴组件的HTML结构通常包含一个按钮（作为标题）和一个紧随其后的内容容器。

<main>
  <div class="accordion_container">
    <!-- ... 其他内容 ... -->

    <div class="accordion_body">
      <div class="accordion_body_item">
        <button class="accordion_btn">Inbox one</button>
        <div class="accordion_content">
          <div class="inner">
            <div class="inner_datetime">dd/mm/yyyy</div>
            <div class="inner_body">
              These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
              cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sint, deserunt cumque nobis illo ut beatae impedit pariatur aliquid minus!
            </div>
          </div>
        </div>
      </div>

      <div class="accordion_body_item">
        <button class="accordion_btn">Inbox two</button>
        <div class="accordion_content">
          <div class="inner">
            <div class="inner_datetime">dd/mm/yyyy</div>
            <div class="inner_body">
              These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
              cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
            </div>
          </div>
        </div>
      </div>

      <!-- ... 更多 accordion_body_item ... -->

    </div>

    <!-- ... 其他内容 ... -->
  </div>
</main>

关键在于 .accordion_btn 和 .accordion_content 之间的相邻关系，这使得我们可以方便地通过 nextElementSibling 访问到内容面板。

CSS 样式

CSS在手风琴组件的视觉和动画效果中扮演着重要角色。以下是与手风琴展开/收起功能直接相关的关键CSS样式：

main div.accordion_container .accordion_body .accordion_body_item .accordion_btn {
  width: 100%;
  background-color: gainsboro;
  border: none;
  /* 修复悬停时内容移动的问题，添加透明边框 */
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  outline: none;
  text-align: left;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 300ms linear;
}

main div.accordion_container .accordion_body .accordion_body_item .accordion_btn:hover {
  background-color: silver;
  border-left-color: rgba(19, 2, 153, 1);
  border-right-color: rgba(19, 2, 153, 1);
  color: rgba(19, 2, 153, 1);
}

/* 按钮上的箭头图标 */
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn::before {
  content: '▼'; /* 默认向下箭头 */
  float: right;
}

/* 展开时向上箭头 */
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn.arrowClass::before {
  content: '▲';
}

main div.accordion_container .accordion_body .accordion_body_item .accordion_content {
  border-left: 3px solid #777;
  border-right: 3px solid #777;
  max-height: 0; /* 默认收起状态 */
  overflow: hidden; /* 隐藏超出内容 */
  transition: max-height 450ms ease-in-out; /* 展开/收起动画 */
}

main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner {
  padding: 20px 15px;
  font-size: 14px;
  background-color: #777;
  color: #dfdfdf;
  height: 200px; /* 内容区域固定高度，可滚动 */
  overflow: auto;
}

/* 其他样式，如滚动条、布局等 */
/* ... (省略了与手风琴功能不直接相关的滚动条和布局样式) ... */

关键CSS属性说明：

• max-height: 0; 和 overflow: hidden;：这是实现内容面板收起状态的关键。当 max-height 为 0 且 overflow 为 hidden 时，内容将不可见。
• transition: max-height 450ms ease-in-out;：为 max-height 属性添加过渡效果，使得面板展开和收起时具有平滑的动画效果。
• max-height = content.scrollHeight + "px";：在 JavaScript 中，将 max-height 设置为内容的实际滚动高度 (scrollHeight)，可以确保内容完全展开。
• ::before 伪元素和 arrowClass：用于在按钮上显示一个箭头图标，并通过 arrowClass 切换其方向，直观地表示面板的展开/收起状态。
• 边框修复： 在 accordion_btn 的 :hover 样式中，如果边框宽度发生变化，可能会导致内容跳动。通过在默认状态下添加 border: 3px solid transparent; 可以预留出边框的空间，从而避免这种跳动。

注意事项与优化

1. 初始状态： 确保页面加载时所有手风琴面板都处于收起状态（即 max-height: 0;）。
2. CSS 边框悬停效果： 如CSS示例所示，为了避免在鼠标悬停时因边框宽度变化导致布局跳动，可以在 accordion_btn 的默认样式中设置一个透明的边框，其宽度与悬停时的边框宽度一致。
3. 无障碍性（Accessibility）： 对于生产环境的应用，建议为手风琴组件添加ARIA属性（如 aria-expanded, aria-controls）和键盘导航支持，以提升用户体验和无障碍性。
4. 性能： 事件委托是一种高效处理大量相似元素事件的方法，因为它只绑定一个事件监听器到父元素，而不是为每个子元素绑定一个。

总结

通过本教程，我们学习了如何利用 JavaScript 的事件委托机制和 CSS 的 max-height 属性，实现一个功能完善且用户体验良好的单项展开手风琴组件。这种实现方式不仅代码简洁高效，而且易于维护和扩展。理解事件委托和CSS过渡的原理是构建此类交互式UI组件的关键。