使用 JavaScript 创建切换显示（手风琴）
点击标题即可展开或收起内容的 FAQ 风格界面
👀 实时演示
👇点击下方问题标题可展开/收起内容👇
❓ 问题1：这是什么？
这是一个通过 JavaScript 控制的手风琴式界面。点击标题即可显示或隐藏对应的内容。
❓ 问题2：适合在什么时候使用？
适用于 FAQ（常见问题）、可折叠菜单、详细信息展示等，便于整理大量信息。
📋 代码片段（HTML 与 JavaScript）
以下是实现该功能所需的最简 HTML 和 JavaScript 代码。
※说明：CSS 假设已包含 `.toggle-box` 等类定义，来自之前制作的 `style.css` 样式文件。
HTML 结构
<!-- 第一组 -->
<div class="toggle-box">
<div class="toggle-title">问题标题1</div>
<div class="toggle-content">
<p>问题1的答案内容</p>
</div>
</div>
<!-- 第二组 -->
<div class="toggle-box">
<div class="toggle-title">问题标题2</div>
<div class="toggle-content">
<p>问题2的答案内容</p>
</div>
</div>JavaScript
document.querySelectorAll('.toggle-title').forEach(title => {
title.addEventListener('click', () => {
title.classList.toggle('active');
const content = title.nextElementSibling;
content.classList.toggle('open');
});
});💻 完整可用代码（HTML 文件）
复制以下代码并保存为 `.html` 文件，即可在浏览器中测试运行。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切换显示演示</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; }
.toggle-box { border: 1px solid #ccc; margin-bottom: 1rem; padding: 1rem; border-radius: 8px; }
.toggle-title { cursor: pointer; font-weight: bold; position: relative; }
.toggle-title::after { content: '＋'; position: absolute; right: 0; }
.toggle-title.active::after { content: '−'; }
.toggle-content { display: none; margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem; }
.toggle-content.open { display: block; }
</style>
</head>
<body>
<h1>FAQ</h1>
<div class="toggle-box">
<div class="toggle-title">问题1</div>
<div class="toggle-content"><p>答案1</p></div>
</div>
<div class="toggle-box">
<div class="toggle-title">问题2</div>
<div class="toggle-content"><p>答案2</p></div>
</div>
<script>
document.querySelectorAll('.toggle-title').forEach(title => {
title.addEventListener('click', () => {
title.classList.toggle('active');
const content = title.nextElementSibling;
content.classList.toggle('open');
});
});
</script>
</body>
</html>📘 说明与自定义建议
这个切换显示模板为创建 FAQ 或手风琴菜单提供了基本结构。但在实际使用中，若同时打开多个项可能影响阅读体验。若希望每次只展开一个项，建议修改 JavaScript 使其在展开新内容时自动关闭其他项。
此外，添加动画效果能提升视觉体验，例如使用 CSS 的 transition 和 max-height，可实现渐变或滑动的展开/收起效果。