HTML怎么做帮助中心的问题折叠展开-html教程-PHP中文网

原生和标签可零 JS 实现折叠展开，语义正确、无障碍友好、SEO 友好；需确保 summary 为首个子元素，用 list-style: none 和 ::marker 定制图标，避免 display: block 破坏行为。

html怎么做帮助中心的问题折叠展开

用 `details` 和 `summary` 最快实现折叠展开

原生 HTML 就支持，不用 JS、不引库、兼容 Chrome/Firefox/Safari/Edge（包括 iOS Safari），details 是语义化标准方案，不是“技巧”而是正确用法。

常见错误是硬套 div + JS 控制 display，既增加体积又丢失可访问性（屏幕阅读器无法识别折叠状态）。

基础写法：

<details><summary>为什么登录后看不到订单？</summary><p>请确认是否切换到了正确的账号，或检查邮箱是否绑定了多个账户。</p>
</details>

summary 必须是 details 的第一个子元素，否则不渲染为可点击标题
默认收起；加 open 属性可默认展开：
支持嵌套，但深层嵌套会影响可读性，建议最多一层嵌套

样式定制：去掉默认箭头并统一外观

浏览器对 summary 的默认三角图标（arrow）不一致，且无法用 ::before 直接覆盖——必须用 list-style: none 清除，再手动加图标。

关键 CSS：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

details summary {
  list-style: none;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  cursor: pointer;
}
details summary::marker {
  content: "▶ ";
  font-size: 0.9em;
}
details[open] summary::marker {
  content: "▼ ";
}

::marker 是现代写法，IE 不支持；如需兼容 IE，改用 summary::before + JS 切换类名
不要给 summary 设 display: block，会破坏默认行内行为，导致点击区域异常
展开内容区域（details 的子元素）默认有上下 margin，需重置避免空白过大

JavaScript 补充控制：比如默认只开一个、或记录用户偏好

原生 details 不支持“手风琴模式”（即展开一个时自动收起其他），需要 JS 协助，但逻辑极简。

让同一组 FAQ 只有一个展开：

document.querySelectorAll('.faq-item').forEach(item => {
  item.addEventListener('toggle', () => {
    if (item.open) {
      document.querySelectorAll('.faq-item').forEach(other => {
        if (other !== item) other.open = false;
      });
    }
  });
});