正确做法是将图标置于label内或通过for/id关联隐藏的checkbox，配合visually-hidden类和:checked兄弟选择器实现无JS切换，同时确保触控区域与焦点样式符合可访问性要求。
点击图标触发 checkbox 状态切换
直接给图标绑定
事件并手动修改
属性，是最容易出错的做法——它绕过了浏览器原生的表单联动机制，导致
关联失效、键盘操作（空格键）不可用、甚至影响可访问性（a11y）。
正确做法是让图标成为
的一部分，或通过
属性关联到隐藏的
：
把图标放在
标签内，且该
包裹或紧邻对应的
或给
设置
，同时给
设置
，确保 ID 严格匹配
图标本身需设置
（否则在部分浏览器中会拦截
的点击穿透）
隐藏 checkbox 但保留功能与语义
用
或
隐藏
会导致屏幕阅读器忽略它，也破坏
的可激活性。必须用视觉隐藏而非逻辑移除。
推荐使用「visually-hidden」类（兼顾可访问性）：
该样式让元素对视觉用户不可见，但保留在 DOM 和可访问树中
不能省略
和
，否则在某些缩放或高对比度模式下可能意外显示
不要用
单独隐藏，它仍占据布局空间且焦点行为不稳定
用 :checked 配合兄弟选择器控制菜单显隐
无需 JS 就能实现“点击图标 → 显示菜单”，关键在于利用
伪类 + 相邻/通用兄弟选择器（
或
）驱动样式变化。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
菜单容器必须是
的**后续兄弟元素**（DOM 顺序中排在它后面）
若菜单在
之前，CSS 无法向上选择，必须换结构或加 JS
常见错误：用
但中间插入了其他元素（如注释、文本节点），导致选择器失效
移动端点击区域与 focus 状态处理
小图标在手机上难点击，且默认 focus 样式（如虚线框）在视觉上突兀。这两点不处理，实际体验会明显打折。
给
设置最小尺寸（如
），符合 iOS/Android 触控最小建议区域
用
移除默认焦点框，但必须提供替代焦点样式（如背景色变化），否则违反 WCAG
避免给
本身设
——它永远不该获得焦点，焦点应落在
上
真正麻烦的是 Safari 在 iOS 上对
的 focus 行为支持不一致：有时点击后不触发 focus，导致你写的
样式不生效。这时候得靠 JS 补一层
，再配合 CSS 判断。
clickcheckedlabellabelforinput[type="checkbox"]labellabelinputlabelfor="xxx"inputid="xxx"pointer-events: nonelabel
display: nonevisibility: hiddeninput[type="checkbox"]label.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}clipoverflow: hiddenopacity: 0:checked+~inputinput:checked + .menu
labelmin-width: 44px; min-height: 44pxlabel:focus { outline: none }inputoutline: nonelabellabel:focuslabel.addEventListener('click', () => label.classList.add('focused'))