原生 无法直接用作侧边菜单折叠图标，因其不支持全局状态响应、宽度联动、图标旋转、手风琴效果及文字/图标条件显隐，且 safari 存在 open 属性失效问题；应使用响应式变量（如 vue 的 menucollapse）统一驱动样式与 dom 状态。
原生 <details></details> + <summary></summary> 能实现基础折叠，但“菜单折叠图标”这种带状态切换、宽度变化、图标旋转的交互，必须靠 CSS + JS 驱动，<details></details> 本身不提供图标控制或侧边栏宽度联动能力。
为什么 <details></details> 不能直接当侧边菜单折叠图标用
它默认只处理单个区块的展开/收起，不响应全局状态（比如 menuCollapse 变量），也不能自动缩窄 <aside></aside> 宽度或旋转图标。Safari 下还可能出现 open 属性失效、点一次就卡住的问题。更关键的是：它无法让多个菜单项互斥（手风琴效果），也不能在折叠时隐藏文字只留图标——这些都得自己写逻辑。
-
<summary></summary>必须是<details></details>的第一个子元素，结构僵硬，不适合嵌入 logo 区或按钮组 - 无法用 CSS 选择器精准捕获“当前是否展开”，只能靠
details[open]，但这个伪类在 JS 切换后可能延迟触发 - 没有事件能区分“用户点击展开”和“JS 主动设置
open=true”，导致动画和状态不同步
menuCollapse 状态如何驱动图标旋转和宽度变化
核心是把图标旋转和容器宽度绑定到同一个响应式变量上，而不是监听 DOM 状态。以 Vue 为例，menuCollapse 是一个 ref 或 pinia store 中的布尔值，所有依赖它的部分都应直接读取它：
- 图标旋转用
transform: rotate(180deg)配合transition，条件是v-if="menuCollapse"或:class="{ 'rotated': menuCollapse }" -
<aside></aside>宽度用计算属性：当menuCollapse为true时返回64px，否则返回260px - logo 文字区域用
v-show="!menuCollapse"控制显隐，避免v-if导致重复渲染 img 标签
注意：不要用 getComputedStyle 去读元素宽度来反推状态——这是典型的“从 DOM 反推状态”，极易在 SSR 或 hydrate 阶段出错。
折叠图标点击后菜单不响应？检查这三处
常见现象是点击图标，<aside></aside> 宽度变了，但子菜单项没收缩，或者图标没转。问题往往不在 JS 逻辑，而在样式层或事件绑定时机：
- 子菜单项用了
display: none，但父容器设置了overflow: hidden，导致高度计算异常，max-height过渡失效 - 图标是用伪元素
::before实现的，但未给其设置display: inline-block和transition: transform 0.2s - 点击事件绑在了
<span></span>上，但该元素被pointer-events: none覆盖（常见于遮罩层或绝对定位的 logo 图片）
移动端触摸下图标点击无反馈？加这行 CSS
很多折叠图标在 iOS Safari 上点不动，不是 JS 失效，而是浏览器对非可点击元素的 touch 响应做了限制。最简单解法是给图标容器加：
cursor: pointer; -webkit-tap-highlight-color: transparent;
如果仍无效，检查是否父级有 touch-action: none（常出现在轮播图或手势库初始化区域），把它改成 touch-action: manipulation 即可。别试图用 click 事件模拟 touchend——现代浏览器已优化 tap 延迟，强行模拟反而增加误触率。
真正难的不是写出折叠效果，而是让图标旋转、文字显隐、菜单收起、宽度变化这四件事在任意设备、任意初始状态下始终同步。状态必须唯一可信源，样式和 DOM 只是它的投影。一旦开始用 offsetWidth 或 clientHeight 去判断折叠状态，就等于把状态分散到了 DOM 树里，后面所有交互都会变得不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
