HTML网页中details标签做侧栏导航时的激活状态保持-html教程-PHP中文网

details侧栏导航无法保持激活状态的根源在于其open状态不跨生命周期保存，页面刷新即重置；必须通过localStorage手动持久化每级data-id对应的展开状态，并用setAttribute/removeAttribute同步DOM。

html网页中details标签做侧栏导航时的激活状态保持

直接用 details 做侧边栏导航时，页面刷新后所有菜单自动收起——这不是 bug，是它的设计逻辑：details 的 open 状态**不跨生命周期保存**，DOM 加载即重置为默认（关闭）。浏览器不会主动记住你上一秒点开了哪一级，更不会同步到其他标签页。

必须手动存取每项的展开状态，关键是给每个 details 标记唯一 ID，并绑定 toggle 事件监听：

details 元素需带 data-id 属性，例如
加载时读 localStorage.getItem('details_nav-settings_open')，值为 'true' 就 setAttribute('open', '')，否则 removeAttribute('open')
监听 toggle 事件，用 details.hasAttribute('open') 判定当前真实状态（别用 details.open，它不可靠）
存值时必须转成字符串：localStorage.setItem(key, String(isOpen))

多级菜单里，子 details 的状态不能靠父级 open 推导——它们彼此独立。常见错误是只存最外层 ID，结果二级菜单点开后刷新就丢了：

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

每一层 details 都要单独设 data-id，比如 data-id="nav-api" 和 data-id="nav-api-auth"
CSS 选择器必须加层级限定，例如 details[open] details[open] 表示两级都展开，避免写成 details[open] details 导致误匹配
summary::marker 在嵌套时样式不继承，子级需显式重置：details details summary::marker { content: "▶"; }
移动端点击热区不足？给所有 summary 加 min-height: 44px 和 padding，否则 Safari 下容易点不中

用户在标签页 A 改了菜单状态，标签页 B 不会自动更新——得靠 storage 事件手动触发重载：

在页面初始化后加 window.addEventListener('storage', handleStorageChange)
handleStorageChange 函数里，检查 event.key 是否匹配 details_.*_open 格式，再定位对应 details 元素并同步 open 属性
注意：Safari 私密模式下 localStorage 可能抛错，需包 try/catch
登录用户若需服务端同步，应把状态存在后端 API，前端仅作降级使用 localStorage