本教程详细介绍了如何使用纯 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组件的关键。
以上就是实现手风琴（Accordion）组件单项展开功能教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1594423.html
微信扫一扫 
支付宝扫一扫 
