折叠菜单不能仅靠实现，需javascript控制显隐并配合aria属性和css过渡；是轻量原生方案，但ie11不支持；多级嵌套需防事件冒泡、精准选择器及键盘可访问性。
折叠菜单不能只靠 <ul></ul> 实现
<ul></ul> 本身只是语义化容器，不带交互能力。想让它“折叠”，必须配合 JavaScript 控制 display 或 max-height，再加 CSS 过渡效果。常见错误是只写 HTML 结构，结果菜单始终展开、点击无反应。
典型结构里，<ul></ul> 套在 <li> 里，而触发折叠的按钮通常放在父级 <li> 的 <button></button> 或 <span></span> 中——注意别把按钮塞进 <ul></ul> 内部，否则会破坏层级逻辑。
用 details + summary 替代手写 JS 更轻量
如果只需要基础折叠/展开（不需动画、不需多级联动），<details></details> 是原生方案，兼容性已覆盖 Chrome 12+、Firefox 49+、Safari 12.1+。它天然支持键盘操作和屏幕阅读器，比手写 toggle() 更可靠。
示例结构：
<details><summary>菜单标题</summary><ul>
<li><a href="#item1">选项一</a></li>
<li><a href="#item2">选项二</a></li>
</ul></details>
要点：
-
<summary></summary>必须是<details></details>的第一个子元素 - 默认展开加
open属性：<details open></details> - CSS 中可用
details[open] > ul精准控制展开时的样式 - 不支持 IE，若需兼容 IE11，必须回退到 JS 方案
手写 JS 折叠时，aria-expanded 和 aria-controls 不可省略
纯视觉折叠对残障用户不友好。每次切换状态，必须同步更新 ARIA 属性，否则屏幕阅读器无法感知状态变化。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
关键操作：
- 点击按钮时，切换
aria-expanded="true/false" - 让按钮的
aria-controls指向对应<ul></ul>的id -
<ul></ul>加role="region"并设置aria-labelledby指回按钮 - 用
classList.toggle()控制hidden类，比直接操作style.display更易维护
错误示例：document.getElementById('menu').style.display = 'none' —— 这样跳过了 ARIA 同步，也绕过了 CSS 过渡。
多级嵌套折叠容易错在事件冒泡和选择器范围
二级 <ul></ul> 放在一级 <li> 里很常见，但 JS 监听 click 时若没阻止冒泡，点子菜单会同时触发父菜单折叠。
解决方式：
- 给每个折叠按钮加唯一
data-target，值为对应<ul></ul>的id - 用
event.stopPropagation()拦截子级点击向上冒泡 - 避免用
document.querySelectorAll('ul')全局查，改用parentElement.querySelector('ul')局部找 - CSS 中用
ul ul { margin-left: 1rem; }控制缩进，别依赖内联style
真正麻烦的不是写几行 JS，而是确保每层折叠状态独立、ARIA 正确、键盘 Tab 能按逻辑顺序进入/退出，且移动端点击区域足够大——这些细节漏掉一个，菜单就等于半残。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
