当前位置：首页 > article >正文

HTML5 手风琴（Accordion）详解

article 2025/1/7 13:01:21

HTML5 手风琴（Accordion）详解

手风琴（Accordion）是一种常用的用户界面控件，允许用户通过点击标题来展开或收起内容，适合用于显示大量信息而不占用太多空间。以下是手风琴的详细介绍及实现示例。
在这里插入图片描述

1. 手风琴的特点

节省空间：通过折叠内容，用户可以更方便地查看所需信息。
交互性强：用户可以根据需要展开或收起内容，提高用户体验。
组织信息：适合将相关内容分组，便于用户理解和查找。

2. HTML5 手风琴的基本结构

以下是一个简单的手风琴实现示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴示例</title>
    <style>
        .accordion {
            background-color: #eee;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 10px 0;
        }
        .accordion-header {
            padding: 10px;
            cursor: pointer;
            text-align: left;
            font-weight: bold;
            background-color: #f1f1f1;
        }
        .accordion-content {
            padding: 10px;
            display: none; /* 默认隐藏内容 */
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body>

<h2>手风琴示例</h2>

<div class="accordion">
    <div class="accordion-header">标题 1</div>
    <div class="accordion-content">
        <p>这是第一个手风琴项的内容。</p>
    </div>
</div>

<div class="accordion">
    <div class="accordion-header">标题 2</div>
    <div class="accordion-content">
        <p>这是第二个手风琴项的内容。</p>
    </div>
</div>

<div class="accordion">
    <div class="accordion-header">标题 3</div>
    <div class="accordion-content">
        <p>这是第三个手风琴项的内容。</p>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(header => {
        header.addEventListener('click', () => {
            const content = header.nextElementSibling;
            const isVisible = content.style.display === 'block';
            content.style.display = isVisible ? 'none' : 'block';
        });
    });
</script>

</body>
</html>