实现单开手风琴效果：JavaScript 事件委托与排他性控制教程-html教程-PHP中文网

实现单开手风琴效果：JavaScript 事件委托与排他性控制教程

本教程详细介绍了如何将一个支持多项同时展开的折叠面板（手风琴）组件，改造为一次只能展开一项的排他性手风琴。通过采用事件委托机制，并结合遍历所有折叠项以关闭非当前点击项的逻辑，我们能高效且优雅地实现这一功能，同时提升代码的可维护性和性能。

在现代网页设计中，折叠面板（Accordion）是一种常见且实用的UI组件，用于在有限空间内展示大量信息。它允许用户点击标题来展开或收起对应的内容区域。然而，在某些场景下，我们可能需要确保在任何时候都只有一个折叠面板处于展开状态，即实现“单开”或“排他性”手风琴效果。本教程将指导您如何使用原生JavaScript实现这一功能。

1. 理解多开手风琴的初始实现

通常，一个多开手风琴的JavaScript实现会为每个折叠按钮单独绑定一个事件监听器。当用户点击某个按钮时，该按钮对应的内容区域会独立地进行展开或收起操作，而不会影响其他折叠项的状态。

以下是初始的多开手风琴的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";
    }
  }
}

登录后复制

这段代码通过遍历所有 accordion_btn 元素，并为每个元素添加 onclick 事件。每个点击事件独立处理其自身的展开/收起逻辑，因此可以同时打开多个面板。

立即学习“Java免费学习笔记（深入）”；

2. HTML结构示例

为了更好地理解手风琴组件，我们先来看一下其典型的HTML结构。每个折叠项通常包含一个按钮（作为标题）和一个内容区域。

<main>
  <div class="accordion_container">
    <div id="accordion_header">通用收件箱</div>

    <div class="accordion_body">
      <div class="accordion_body_item">
        <button class="accordion_btn">收件箱一</button>
        <div class="accordion_content">
          <div class="inner">
            <div class="inner_datetime">dd/mm/yyyy</div>
            <div class="inner_body">
              这里是收件箱一的详细内容。
            </div>
          </div>
        </div>
      </div>

      <div class="accordion_body_item">
        <button class="accordion_btn">收件箱二</button>
        <div class="accordion_content">
          <div class="inner">
            <div class="inner_datetime">dd/mm/yyyy</div>
            <div class="inner_body">
              这里是收件箱二的详细内容。
            </div>
          </div>
        </div>
      </div>
      <!-- 更多 accordion_body_item... -->
    </div>
  </div>
</main>

登录后复制

3. CSS样式示例

CSS在实现手风琴的视觉效果和过渡动画中起着关键作用。特别是 max-height 和 transition 属性，它们共同实现了平滑的展开/收起动画。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

/* 引入字体和通用重置 */
@import url('https://fonts.googleapis.com/css?family=Inter');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 滚动条样式 (可选) */
main div.accordion_container::-webkit-scrollbar,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar {
  width: 4px;
}
/* ...其他滚动条样式 */

/* 主容器样式 */
main {
  background-color: rgba(25, 25, 25, 0.8);
  display: grid;
  place-items: center;
  font-family: 'Inter';
  width: 100%;
  height: 100vh;
}

main div.accordion_container {
  background-color: #efefef;
  padding: 10px;
  width: 800px;
  overflow: auto;
  border-radius: 3px;
  position: relative;
}

/* 按钮样式 */
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn {
  width: 100%;
  background-color: gainsboro;
  border: none;
  /* 为避免hover时内容移动，添加透明边框占位 */
  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);
  color: rgba(19, 2, 153, 1);
  border-right-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;：这是实现收起状态的关键。
transition: max-height ...;：使 max-height 属性的变化平滑过渡，产生动画效果。
content.scrollHeight + "px"：在JavaScript中，通过设置 max-height 为 scrollHeight 来展开内容，scrollHeight 是元素内容完全显示所需的最小高度。

4. 实现单开手风琴：事件委托与排他性逻辑

要实现单开手风琴，我们需要修改JavaScript逻辑，确保在展开一个面板之前，所有其他已展开的面板都会被收起。同时，为了优化性能和代码简洁性，我们可以采用事件委托（Event Delegation）模式。

事件委托原理： 不为每个子元素单独绑定事件，而是将事件监听器绑定到它们的共同父元素上。当子元素上的事件被触发时，事件会沿着DOM树向上冒泡，直到被父元素上的监听器捕获。在监听器中，我们可以通过 event.target 属性判断是哪个子元素触发了事件，并进行相应的处理。

排他性逻辑： 当一个手风琴按钮被点击时：

首先，遍历所有手风琴按钮，将它们对应的内容区域收起，并移除表示展开状态的类名（如 arrowClass）。
然后，判断当前点击的按钮，如果它所对应的面板当前是收起状态，则将其展开；如果当前是展开状态，则将其收起（即切换状态）。

以下是实现单开手风琴的JavaScript代码：

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

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

    // 遍历所有按钮，关闭非当前点击的面板
    allAccordionBtns.forEach(btn => {
      // 如果当前遍历的按钮不是被点击的按钮
      if (btn !== e.target) {
        btn.nextElementSibling.style.maxHeight = null; // 收起内容
        btn.classList.remove('arrowClass'); // 移除箭头类
      }
    });

    // 处理当前点击的按钮：切换其内容区域的展开/收起状态
    let currentContent = e.target.nextElementSibling;
    // 判断当前面板是否已展开，如果已展开则收起，否则展开
    if (parseFloat(currentContent.style.maxHeight) === parseFloat(currentContent.scrollHeight)) {
      currentContent.style.maxHeight = null; // 收起
    } else {
      currentContent.style.maxHeight = currentContent.scrollHeight + "px"; // 展开
    }

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

登录后复制

代码解析：

let allAccordionBtns = document.querySelectorAll('.accordion_btn');：获取页面上所有带有 accordion_btn 类的按钮，存储在一个 NodeList 中。
document.querySelector('main').addEventListener('click', e => { ... });：将 click 事件监听器绑定到 main 元素上。这是事件委托的核心，所有 accordion_btn 的点击事件都会冒泡到 main 并在此处处理。
if (e.target.classList.contains('accordion_btn')) { ... }：在事件处理函数内部，我们首先检查 event.target（实际被点击的元素）是否是我们感兴趣的 accordion_btn。
allAccordionBtns.forEach(btn => { ... });：如果点击的是一个手风琴按钮，我们遍历 allAccordionBtns 集合。
if (btn !== e.target) { ... }：在遍历过程中，我们跳过当前被点击的按钮，只处理其他按钮。对于其他按钮，我们将其内容区域的 maxHeight 设置为 null，并移除 arrowClass，从而实现收起效果。
let currentContent = e.target.nextElementSibling;：获取当前被点击按钮的相邻兄弟元素，即其对应的内容区域。
if (parseFloat(currentContent.style.maxHeight) === parseFloat(currentContent.scrollHeight)) { ... } else { ... }：这行代码判断当前内容区域的 maxHeight 是否等于其 scrollHeight。如果相等，说明它当前是完全展开的，那么就将其收起（maxHeight = null）；否则，说明它是收起状态，就将其展开（maxHeight = currentContent.scrollHeight + "px"）。这里使用 parseFloat 是为了确保数值比较的准确性。
e.target.classList.toggle('arrowClass');：最后，切换当前点击按钮的 arrowClass，以更新其箭头图标。

5. 注意事项与最佳实践

事件委托的优势：
- 性能优化： 只需要一个事件监听器，而不是为每个按钮都添加一个，尤其在手风琴项数量多时，能显著减少内存占用和DOM操作。
- 动态元素支持： 如果手风琴项是动态添加或移除的，事件委托的监听器依然有效，无需重新绑定。
max-height 与 height： 使用 max-height 配合 overflow: hidden 和 transition 是实现平滑展开/收起动画的常用且推荐方式。直接使用 height 可能导致动画不自然或难以处理动态内容高度。
scrollHeight 的准确性： scrollHeight 属性返回元素内容的完整高度，包括由于 overflow 隐藏的部分。它是动态展开内容的关键。
可访问性（Accessibility）： 对于生产环境的应用，应考虑添加WAI-ARIA属性，例如 aria-expanded 到按钮上，aria-controls 指向内容区域的ID，以提升屏幕阅读器用户的体验。
CSS 细节： 在CSS中，为了防止 hover 效果（如边框）导致内容移动，可以在非 hover 状态下为按钮设置一个透明的相同宽度边框，使其占据空间。例如：border-left: 3px solid transparent;。