标签不适合做导航，因其语义是折叠信息块而非导航；不支持hover、嵌套、横向布局及稳定移动端交互，且IE完全不支持、旧版浏览器存在兼容性问题。

标签确实能实现「纯 HTML 下拉交互」，但它不是为导航设计的，直接当导航条用会出问题。

的语义和限制很明确

• 它是为「可折叠的额外信息块」设计的，比如 FAQ、技术说明、表单补充项
• 浏览器原生只支持单层展开/收起，不支持 hover 触发（必须点击
  ）
• 没有子菜单嵌套能力：嵌套
  在多数浏览器里会中断事件流或样式错乱
• 无障碍支持虽好（自动加 aria-expanded），但键盘操作逻辑不符合导航预期（比如 Tab 键无法进入子项）

真实用

做导航时的典型翻车点

• 里放 链接，点击后既跳转又触发展开 → 行为冲突，部分浏览器会跳转失败或闪退
• 用 CSS 强行把
  改成横向布局，但 display: flex +
  的默认渲染顺序会让下拉内容错位
• 在移动端，
  的点击热区太小，且 iOS Safari 对
  的 focus 状态处理不稳定，容易误触

如果非要用它做轻量下拉，只能这样妥协

• 把导航项做成独立的
  块，每个只控制一个子菜单，不嵌套
• 内只放纯文本，链接全部挪到
  内部的
  里
• 加上 open 属性做默认展开（仅限首屏关键项）
• 必须补 CSS：强制
  无 outline，禁用 user-select，重设 cursor
• 示例结构：

  <details><summary>产品</summary><ul>
  <li><a href="/web">网页设计</a></li>
    <li><a href="/dev">网站开发</a></li>
  </ul></details>

最容易被忽略的兼容性细节

在 IE 完全不支持，Edge 79+ 才稳定；旧版 Safari（≤15.6）对 open 属性的 JS 控制有延迟；如果你的用户里还有企业内网用户（尤其金融、政务场景），大概率还在用 Chrome 90 以下版本 —— 那些版本对

的 focus 管理存在焦点丢失 bug。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

纯 HTML 交互设计思维没错，但得承认：导航不是「要不要 JS」的问题，而是「能不能承受语义错位和体验断层」的问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！