原生js实现手风琴功能（支持横纵向调用）

话不多说，请看代码： &lt;!DOCTYPE html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;手风琴-支持横纵向调用-原生js封装&lt;/title&gt; &lt;link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/&gt; &lt;link rel="icon" href="../public/image/favicon.png" type="images/png"/&gt; &lt;link rel="stylesheet" type="t 在本文中，我们将深入探讨如何使用原生JavaScript实现一个手风琴效果，它不仅支持横向展示，也支持纵向展示。手风琴效果是一种常见的UI组件，通常用于在有限的空间内展示可折叠的内容区域，用户可以逐个展开或收起内容。 我们需要理解手风琴效果的基本原理。手风琴通过控制元素的`display`属性来实现内容的隐藏与显示。当用户点击某个触发元素（如标题或按钮）时，对应的隐藏内容区域会显示出来，而其他区域则会收起。关键在于正确地监听用户交互，并更新相应的CSS样式。 下面，我们将分步骤讲解实现这个功能的JavaScript代码： 1. **HTML结构**： 在HTML中，我们需要创建一个包含多个可折叠内容块的结构。每个内容块通常由一个触发元素（例如`<h2>`或`<button>`）和一个可隐藏的内容区域（如`<div>`）组成。例如： ```html <div class="accordion"> <div class="accordion-item"> <button class="accordion-title">标题1</button> <div class="accordion-content" style="display:none;">内容1</div> </div> <!-- 更多accordion-item --> </div> ``` 2. **CSS样式**： 为了使手风琴效果看起来更美观，我们需要添加一些基本的CSS样式。例如，设置触发元素的样式，隐藏内容区域的初始状态等。在提供的代码中，已经定义了一些通用样式，如清除默认边距和填充，以及设定字体、链接样式等。在实现手风琴效果时，还需要针对`.accordion`、`.accordion-item`、`.accordion-title`和`.accordion-content`等类添加相应的CSS规则。 3. **JavaScript实现**： 使用原生JavaScript，我们可以为每个触发元素添加点击事件监听器。当点击事件触发时，我们检查当前元素是否已经是展开状态，如果是，则将其关闭；否则，关闭所有其他内容区域并打开当前内容区域。这可以通过遍历所有的`accordion-item`元素并更新它们的`display`属性来实现。 以下是一个简单的JavaScript示例代码片段： ```javascript var accordionItems = document.querySelectorAll('.accordion-item'); for (var i = 0; i < accordionItems.length; i++) { var item = accordionItems[i]; var title = item.querySelector('.accordion-title'); var content = item.querySelector('.accordion-content'); title.addEventListener('click', function() { var isActive = this.nextElementSibling.style.display === 'block'; for (var j = 0; j < accordionItems.length; j++) { accordionItems[j].querySelector('.accordion-content').style.display = 'none'; accordionItems[j].querySelector('.accordion-title').classList.remove('active'); } if (!isActive) { content.style.display = 'block'; this.classList.add('active'); } }); } ``` 在这段代码中，我们首先获取所有的`accordion-item`元素，然后为每个标题元素添加点击事件监听器。当点击发生时，我们判断当前内容区域是否已展开，如果未展开，就展开它并添加一个`active`类以标记当前活动项；如果已展开，就收起它并移除`active`类。 4. **横纵向调用**： 要实现横纵向切换，我们需要根据手风琴的布局来调整内容区域的CSS。例如，将`.accordion-content`的`display`属性从`block`改为`flex`或`inline-block`，并相应地设置其容器的宽度和高度。同时，可能需要添加一些过渡效果来增强用户体验。 实现一个支持横纵向调用的手风琴功能，主要涉及到HTML结构的设计，CSS样式的编写，以及JavaScript事件监听和DOM操作。通过结合这三个方面，我们可以创建出一个灵活且易于定制的手风琴组件。