display切换不生效主因是css中!important或高优先级规则覆盖；应优先用class控制显隐，js操作前清空内联样式，判断状态须用getcomputedstyle而非style.display。
点击事件绑定后 display 切换不生效？检查元素是否被 CSS 强制覆盖
直接改 display 属性却没反应，大概率是 CSS 里写了 !important 或者用了更具体的样式规则（比如 #sidebar { display: block !important; }）。JS 设置的内联样式优先级虽高，但敌不过 !important 的显式声明。
实操建议：
- 用浏览器开发者工具检查侧边栏元素的最终
display值，看是否被其他样式覆盖 - 优先用 class 控制显隐（比如
.sidebar-hidden { display: none; }），避免和 CSS 规则硬碰硬 - 若必须用 JS 直改
display，先清空可能干扰的内联样式：element.style.display = '';再赋新值
用 toggle() 还是手动判断 display？推荐用 getComputedStyle 而非 style.display
element.style.display 只读取内联样式，如果元素初始状态由外部 CSS 定义（比如 .sidebar { display: none; }），这里会返回空字符串，导致判断失准。
正确做法是读取计算后样式：
const sidebar = document.getElementById('sidebar');
const computed = getComputedStyle(sidebar);
if (computed.display === 'none') {
sidebar.style.display = 'block';
} else {
sidebar.style.display = 'none';
}
也可以封装成复用函数：
function toggleDisplay(el) {
const d = getComputedStyle(el).display;
el.style.display = d === 'none' ? 'block' : 'none';
}
移动端点击图标无响应？确认事件监听器绑在了可点击的 DOM 上
常见错误：图标是 SVG 或子元素，但事件监听器绑在了父容器上，而父容器没有设置 cursor: pointer 或 touch-action: manipulation，导致 iOS Safari 不触发 click。
实操建议：
- 监听器尽量直接绑定在图标元素（
<i class="icon-menu"></i>）上，而不是外层<div> <li>给图标加 <code>style="cursor: pointer; -webkit-tap-highlight-color: transparent;"提升触摸反馈 - 更稳妥的做法是同时监听
click和touchend（注意防重复触发，可用event.preventDefault()+ 节流） -
visibility: hidden+opacity: 0组合（不占布局空间但保留渲染树，适合快速开关） -
max-height配合overflow: hidden实现高度动画（需预设合理最大值，如max-height: 500px） - 现代方案：用
transform: translateX(-100%)移出视口，配合transition，性能最好
展开/隐藏有闪动或布局抖动？避免频繁重排，优先用 visibility 或 max-height 动画
直接切 display 会触发浏览器重排（reflow），尤其侧边栏含图片或复杂结构时，可能造成卡顿或内容跳动。
如需平滑过渡，可改用：
纯 display 切换虽简单，但只要用户感知到“闪”或“跳”，就得考虑替代方案。
实际项目中，最易被忽略的是：**display 切换后，内部表单元素（如<input>）的焦点和输入法状态会丢失，且无法通过 focus() 立即恢复**。如果侧边栏含搜索框等交互组件，得额外处理 focus 管理。
