在网页中呈现常见问题解答时，可折叠手风琴能让页面保持简洁，用户点击问题才展开答案。这种交互完全可以用原生HTML、CSS和JavaScript完成，不需要依赖任何框架。下面先看基础结构如何组织。
一、HTML结构搭建
手风琴通常由一组问答对组成，每一个问答对包含一个可点击的提问区域和一个隐藏的答案区域。使用语义化标签能让屏幕阅读器正确识别，也为后续样式控制提供钩子。推荐使用<button>作为提问触发器，因为它天然支持键盘操作。
答案区域可以用<div>包裹，并通过CSS默认隐藏。为了避免JavaScript失效时内容不可见，也可以先不写隐藏样式，等脚本加载后再添加折叠能力。下面的代码展示了一个最小可用的结构：
<div class="faq-accordion">
<div class="faq-item">
<button class="faq-question" aria-expanded="false" aria-controls="ans1">
如何重置账户密码？
</button>
<div class="faq-answer" id="ans1" hidden>
<p>进入设置页面，点击安全中心，选择忘记密码，按邮件提示操作即可。</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false" aria-controls="ans2">
支持哪些支付方式？
</button>
<div class="faq-answer" id="ans2" hidden>
<p>目前支持银行卡、支付宝以及微信支付。</p>
</div>
</div>
</div>
这里每个按钮都带上了aria-expanded和aria-controls属性，前者告诉辅助技术当前是否展开，后者关联答案容器编号。答案容器使用hidden属性做初始隐藏，比用CSSdisplay:none更语义化。
二、CSS样式与动画
基础隐藏用hidden属性即可，但如果希望有平滑的展开收起效果，就不能直接用hidden切换，而要用高度或透明度过渡。一种简单做法是答案容器默认max-height:0且overflow:hidden，展开时赋予一个足够大的max-height。
需要注意的是max-height动画在内容很高时会有延迟感，因为浏览器按设定的最大值计算时间。若答案长度固定，可直接用固定高度过渡。下面样式实现了带过渡的折叠效果：
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: #f7f7f7;
}
.faq-answer.open {
max-height: 500px;
}
.faq-question {
width: 100%;
text-align: left;
padding: 12px;
background: #eee;
border: none;
cursor: pointer;
font-size: 16px;
}
上述代码中，.open类控制展开状态。若实际答案可能超过500px，应调大该值或改用JS计算真实高度。此外，为避免动画结束前用户重复点击导致闪烁，可在脚本中做简单的锁处理。
三、JavaScript交互逻辑
点击展开与收起的核心，是监听按钮点击事件，然后切换对应答案容器的状态，并同步aria-expanded。如果希望同时只展开一个，则要先关闭其他项；若允许多个独立展开，则各自切换即可。
下面脚本支持多个独立展开，并在切换hidden与open类之间做兼容。对于不支持hidden的老浏览器，可用样式兜底：
document.querySelectorAll('.faq-question').forEach(function(btn) {
btn.addEventListener('click', function() {
var expanded = btn.getAttribute('aria-expanded') === 'true';
var answer = document.getElementById(btn.getAttribute('aria-controls'));
if (expanded) {
btn.setAttribute('aria-expanded', 'false');
answer.classList.remove('open');
answer.setAttribute('hidden', '');
} else {
btn.setAttribute('aria-expanded', 'true');
answer.classList.add('open');
answer.removeAttribute('hidden');
}
});
});
这段代码遍历所有提问按钮，每次点击读取当前aria-expanded。如果是展开就收起，反之亦然。使用classList切换样式类，比直接改style更易维护。若页面是动态加载的FAQ，需要在插入DOM后重新绑定事件，或采用事件委托。
四、常见问题与优化
实际项目中，FAQ数据往往来自接口。此时可在拿到数据后拼装HTML，再执行绑定。另一个坑是CSS过渡与hidden冲突：设置了hidden的元素不会参与过渡，所以上面脚本在添加open前先移除hidden，收起时等过渡结束再补回hidden更好。
如果追求更顺滑的高度动画，可用JS测量scrollHeight并赋给max-height，过渡结束后再置为none。但对手风琴这类简单组件，固定max-height通常够用。最后记得在移动端测试点击区域大小，避免按钮过小导致误触。
// 更精确的高度过渡示例
function toggleAnswer(btn, answer) {
if (btn.getAttribute('aria-expanded') === 'true') {
answer.style.maxHeight = '0px';
btn.setAttribute('aria-expanded', 'false');
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
btn.setAttribute('aria-expanded', 'true');
}
}
通过以上结构、样式与脚本的组合，就能构建一个轻量、可访问且易扩展的FAQ手风琴。后续若接框架，思路一致，只是把DOM操作交给框架的响应式状态管理即可。
FAQ_accordionJavaScript_toggleCSS_transition修改时间：2026-08-06 06:42:28