如何用HTML代码实现网页原生手风琴效果而无需样式表-html教程-PHP中文网

原生手风琴应使用实现，它语义化、无障碍、跨浏览器兼容，且无需css或js；必须为的第一个子元素且不可自闭合，支持嵌套与多开，通过localstorage可持久化状态。

如何用html代码实现网页原生手风琴效果而无需样式表

用 `<details></details>` 和 `<summary></summary>` 实现原生手风琴

浏览器原生支持手风琴交互，根本不需要 CSS —— 只要用好 <details></details> 元素就行。<details></details> 默认折叠，点击 <summary></summary> 就展开，这是 HTML5 内置语义化组件，所有现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）都直接支持。

常见错误是把 <summary></summary> 写成闭合标签（如 <summary></summary>），或把它放在 <details></details> 外面。它必须是 <details></details> 的**第一个子元素**，且不能自闭合。

<details></details> 是容器，自带 open 布尔属性：加了就默认展开，不加就默认收起
<summary></summary> 内容会显示为可点击标题，浏览器自动添加小三角（无 CSS 时样式极简但可用）
允许嵌套：一个 <details></details> 可以放在另一个的展开内容里，实现多层手风琴
不支持同时展开多个？其实支持——每个 <details></details> 独立控制，没有“单选”限制

为什么不用 `onclick` + `display` 切换

手动用 onclick 控制 style.display 看似简单，但会立刻掉进几个坑：

破坏可访问性：<details></details> 自动关联 ARIA 属性（如 aria-expanded），屏幕阅读器能识别状态；手写 JS 很容易漏掉这些
丢失原生行为：比如按空格/回车键也能触发展开，<details></details> 原生支持，手写逻辑要额外监听键盘事件
无法响应 open 属性变化：JS 修改 details.open = true 会触发浏览器动画和状态同步；手写方案得自己维护状态变量，还容易和 DOM 不一致
移动端点透/延迟问题：原生 <details></details> 经过大量优化，手写点击处理在 iOS Safari 上可能有 300ms 延迟或点不中

`<details></details>` 的兼容性与降级处理

IE 完全不支持 <details></details>，但如果你明确不需兼容 IE（2024 年绝大多数生产环境已放弃），就无需降级。若必须支持旧浏览器，最轻量做法是用 <noscript></noscript> 包裹 fallback 内容，并配合简单脚本检测：

<details><summary>常见问题</summary><p>这里是展开内容…</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</details><noscript>
  <div class="fallback-accordion">
    <h3>常见问题</h3>
    <p>这里是展开内容…</p>
  </div>
</noscript>

注意：不要试图用 JS “模拟” <details></details> 的全部行为来兼容 IE —— 成本远高于收益。真实项目中，更推荐服务端 UA 判断后输出不同结构，或直接要求用户升级浏览器。

展开状态持久化：用 `localStorage` 记住用户选择

<details></details> 本身不记忆状态，刷新就重置。如果需要记住用户上次展开的是哪一项，可以绑定 toggle 事件：

<details id="faq1"><summary>怎么重置密码？</summary><p>请前往登录页点击「忘记密码」…</p>
</details><script>
const el = document.getElementById('faq1');
const key = 'faq1_open';
el.open = localStorage.getItem(key) === 'true';
el.addEventListener('toggle', () => {
  localStorage.setItem(key, el.open);
});
</script>

关键点：