底部导航用 会失效，应改用 input[type="checkbox"] + label 方案；需确保 DOM 顺序严格、CSS 使用 max-height 动画、body 动态调整 padding-bottom，并避免 z-index 和 position: fixed 问题。
底部导航用 <details></details> 会失效，别硬套
直接把 <details></details> 放在页脚区域，点击没反应——不是代码写错，而是多数移动端 WebView（尤其是微信 X5、QQ 浏览器）对 <details></details> 在非视口中心区域的点击事件支持极差，Safari on iOS 也会偶发不触发 toggle。这不是 bug，是渲染层对低优先级区域交互的主动降级。真要用原生方案，必须加 JS 补偿；否则就换更稳的结构。
input[type="checkbox"] + label 是底部导航最可靠方案
这是目前唯一能在微信、iOS Safari、安卓 WebView 全平台稳定记住状态、响应点击、支持键盘聚焦的纯 HTML/CSS 方案。关键不在“有没有 JS”，而在 DOM 顺序和 CSS 选择器写法：
-
<input type="checkbox" id="footer-nav-toggle">必须是第一个元素，前后不能有空格或换行 -
<label for="footer-nav-toggle">菜单</label>必须紧接其后，中间不能插入任何节点（包括注释） -
<nav class="footer-submenu"></nav>必须是label的**直接兄弟节点**，不能包在<div> 里 <li>CSS 规则必须写成：<code>input[type="checkbox"]:checked ~ .footer-submenu { display: block; }，不能用visibility或opacity - 初始状态：
.footer-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } - 展开状态：
input:checked ~ .footer-submenu { max-height: 300px; }（值要预估够，300px 覆盖常见 5–6 项） - 别设
height: 0→height: auto，这会导致动画卡顿甚至跳变 - 如果子项含图片或异步加载内容，动画中途高度撑开，需 JS 监听
load后重设max-height，但底部导航通常静态，可忽略 - 给
加padding-bottom，值 = 折叠态高度 + 展开态最大高度，例如padding-bottom: 120px - 展开时用 JS 切换
body的 class，动态增减padding-bottom，比纯 CSS 更可控 - 绝对不要给
.footer-submenu设z-index: 9999硬盖，这会导致 iOS 键盘弹起时菜单被截断 - 微信内嵌浏览器对
position: fixed底部元素滚动时重绘异常，建议改用position: absolute; bottom: 0; width: 100%;并确保父容器有position: relative
底部展开菜单需要控制高度动画？用 max-height 别碰 height: auto
想让底部菜单滑出而不是突显，display: none 无法过渡，height: auto 也不能参与 transition。唯一可行路径是 max-height：
移动端底部导航折叠后，别让内容区被压住
底部固定定位（position: fixed; bottom: 0）时，展开的菜单会盖住页面主体，或者把主体往上顶。解决方法很实际：
立即学习“前端免费学习笔记（深入）”；
真正难的不是让菜单动起来，而是展开后用户能点到第二级链接、键盘 Tab 不跳过折叠项、小屏下不把整个页面顶出屏幕——这些细节一旦漏掉，底部导航就只是个摆设。
