手风琴折叠菜单

原创已于 2025-06-27 13:24:16 修改 · 272 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-07 15:48:25 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴折叠菜单</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}

h1 {
color: #333;
margin-bottom: 30px;
}

.accordion {
width: 80%;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.accordion-item {
margin-bottom: 5px;
border-radius: 5px;
overflow: hidden;
background-color: #fff;
}

.accordion-header {
padding: 15px 20px;
background-color: #4a90e2;
color: white;
cursor: pointer;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s;
}

.accordion-header:hover {
background-color: #3a7bc8;
}

.accordion-header::after {
content: '+';
font-size: 20px;
transition: transform 0.3s;
}

.accordion-item.active .accordion-header::after {
content: '-';
}

.accordion-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #f9f9f9;
}

.accordion-item.active .accordion-content {
padding: 15px 20px;
max-height: 500px;
}

.accordion-content p {
margin: 0;
line-height: 1.6;
color: #555;
}

.footer {
margin-top: 30px;
text-align: center;
}

.footer a {
color: #4a90e2;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>手风琴折叠菜单</h1>

<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">第一部分</div>
<div class="accordion-content">
<p>这是第一部分的内容。手风琴菜单是一种常见的UI组件，可以有效地组织和展示内容。</p>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">第二部分</div>
<div class="accordion-content">
<p>这是第二部分的内容。点击标题可以展开或折叠内容区域。</p>
<p>每个部分可以包含任意数量的文本或其他HTML元素。</p>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">第三部分</div>
<div class="accordion-content">
<p>这是第三部分的内容。手风琴菜单非常适合FAQ页面或内容分类展示。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">第四部分</div>
<div class="accordion-content">
<p>这是第四部分的内容。手风琴菜单可以节省页面空间，同时保持内容的可访问性。</p>
</div>
</div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function() {
const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
const header = item.querySelector('.accordion-header');

header.addEventListener('click', () => {
// 关闭其他所有项目
accordionItems.forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.remove('active');
}
});

// 切换当前项目
item.classList.toggle('active');
});
});

// 默认展开第一个项目
if (accordionItems.length > 0) {
accordionItems[0].classList.add('active');
}
});
</script>
</body>
</html>