本教程详细介绍了如何使用纯 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";
}
}
}这种方法的问题在于，每个手风琴项都是独立操作的。当用户点击一个按钮时，它只会改变自身的状态，而不会影响其他手风琴项。因此，多个手风琴面板可以同时保持展开状态，这在某些设计场景下可能不是期望的行为。
实现单项展开的核心思路
要实现手风琴组件的单项展开功能，核心思想是：当一个手风琴面板被点击并展开时，必须确保所有其他手风琴面板都处于收起状态。 我们可以通过以下步骤来实现这一目标：
- 事件委托： 不为每个手风琴按钮单独绑定事件，而是为它们共同的父元素绑定一个事件监听器。利用事件冒泡机制，当任何一个手风琴按钮被点击时，父元素上的监听器都能捕获到事件。
- 识别目标： 在事件处理函数中，判断触发事件的元素（event.target）是否为手风琴按钮。
- 关闭其他： 在展开当前点击的手风琴面板之前，遍历所有的手风琴按钮及其对应的内容面板，将它们全部收起并移除相关的CSS类。
- 展开当前： 最后，再根据当前点击的按钮，切换其内容面板的展开/收起状态。
这种方法不仅解决了单项展开的问题，还通过事件委托优化了性能，特别是当页面中手风琴项数量较多时。
JavaScript 解决方案
我们将修改原有的JavaScript代码，采用事件委托并加入“关闭其他”的逻辑。
// 获取所有手风琴按钮的集合
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结构通常包含一个按钮（作为标题）和一个紧随其后的内容容器。
关键在于 .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; 可以预留出边框的空间，从而避免这种跳动。
注意事项与优化
- 初始状态： 确保页面加载时所有手风琴面板都处于收起状态（即 max-height: 0;）。
- CSS 边框悬停效果： 如CSS示例所示，为了避免在鼠标悬停时因边框宽度变化导致布局跳动，可以在 accordion_btn 的默认样式中设置一个透明的边框，其宽度与悬停时的边框宽度一致。
- 无障碍性（Accessibility）： 对于生产环境的应用，建议为手风琴组件添加ARIA属性（如 aria-expanded, aria-controls）和键盘导航支持，以提升用户体验和无障碍性。
- 性能： 事件委托是一种高效处理大量相似元素事件的方法，因为它只绑定一个事件监听器到父元素，而不是为每个子元素绑定一个。
总结
通过本教程，我们学习了如何利用 JavaScript 的事件委托机制和 CSS 的 max-height 属性，实现一个功能完善且用户体验良好的单项展开手风琴组件。这种实现方式不仅代码简洁高效，而且易于维护和扩展。理解事件委托和CSS过渡的原理是构建此类交互式UI组件的关键。
