通过为折叠面板按钮和内容区域添加 active 类并配合 css 过渡动画，可实现它们与侧边栏一致的平滑位移效果，避免布局错位。
通过为折叠面板按钮和内容区域添加 active 类并配合 css 过渡动画，可实现它们与侧边栏一致的平滑位移效果，避免布局错位。
在构建响应式个人网站时，侧边栏（如汉堡菜单展开/收起）若采用 left 位移动画（例如从 -300px 到 0），而页面其他绝对定位元素（如本例中的 accordion 按钮和内容）仍保持固定 left 值（如 600px），就会导致视觉脱节——侧边栏“滑出”后，按钮却原地不动，破坏整体动效一致性。
解决思路是：将 accordion 按钮与内容区域也纳入同一套状态驱动机制中，使其 left 值随侧边栏状态动态切换，并通过 transition 保证位移节奏同步。
✅ 实现步骤
-
JavaScript 状态联动
在 show() 函数中，除切换 #sidebar.active 外，同步为 .accordion__button 和 .accordion__content 添加/移除 active 类：
function show() {
const sidebar = document.getElementById('sidebar');
const button = document.querySelector('.accordion__button');
const content = document.querySelector('.accordion__content');
sidebar.classList.toggle('active');
button.classList.toggle('active');
content.classList.toggle('active');
}
-
CSS 定义双态位置与过渡
- 初始状态（侧边栏收起）：按钮与内容 left: 15px（贴近页面左侧空白区，避开侧边栏初始位置）；
- 激活状态（侧边栏展开）：.accordion__button.active 和 .accordion__content.active 统一设为 left: 310px（即 300px 侧边栏宽度 + 10px 间距），确保它们“跟随”侧边栏右移；
- 关键：为 left 属性显式声明 transition: left .4s（与侧边栏 .4s 保持一致）：
.accordion__button {
position: absolute;
top: 100px;
left: 15px; /* 收起时位置 */
transition: background 0.2s, left .4s; /* 同步侧边栏动画时长 */
}
.accordion__content {
position: absolute;
top: 147px;
left: 15px; /* 收起时位置 */
transition: max-height 0.2s, left .4s;
}
/* 激活时统一右移 */
.accordion__button.active,
.accordion__content.active {
left: 310px; /* 300px (sidebar width) + 10px margin */
}
⚠️ 注意事项：
- 避免在 HTML 中将
写在
