本文介绍如何通过 css 类切换与过渡动画，使折叠面板（accordion）的按钮和内容区域在侧边栏展开/收起时自动平滑位移，实现视觉一致性。
本文介绍如何通过 css 类切换与过渡动画，使折叠面板（accordion）的按钮和内容区域在侧边栏展开/收起时自动平滑位移，实现视觉一致性。
在构建响应式个人网站时，侧边栏（sidebar）常采用「抽屉式」交互——点击汉堡菜单后从左侧滑入。但若页面中存在固定定位的交互元素（如本例中的 accordion 按钮与内容区），它们默认不会随侧边栏动态调整位置，导致布局错乱、用户体验割裂。
解决核心在于建立侧边栏状态与关联元素的联动机制：当 #sidebar 切换 .active 类时，同步为 .accordion__button 和 .accordion__content 添加/移除 .active 类，并通过 CSS 定义其在两种状态下的 left 值及过渡效果。
✅ 关键修改步骤
-
JavaScript 逻辑增强
在 show() 函数中，除切换侧边栏类外，同步控制 accordion 元素的状态：
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');
}
⚠️ 注意：确保 .accordion__button 和 .accordion__content 在 DOM 中唯一（或使用 querySelectorAll + 循环处理多个），避免因选择器不精确导致失效。
-
CSS 定位重构
移除原始代码中硬编码的 left: 600px，改用相对基准定位：
- 初始状态（侧边栏关闭）：left: 15px（紧贴视口左边缘，避开隐藏的侧边栏）
- 展开状态（侧边栏激活）：left: 310px（即 300px 侧边栏宽度 + 10px 间距）
同时为两个元素添加 transition: left .4s，使其位移节奏与侧边栏完全一致：
.accordion__button,
.accordion__content {
position: absolute;
transition: left .4s, background 0.2s; /* 合并过渡属性 */
}
.accordion__button {
top: 100px;
left: 15px; /* 默认位置 */
width: 10%;
padding: 15px;
/* ...其余样式保持不变 */
}
.accordion__content {
top: 147px;
left: 15px; /* 默认位置 */
max-height: 0;
overflow: hidden;
transition: left .4s, max-height 0.2s; /* 同时过渡 left 和高度 */
/* ...其余样式保持不变 */
}
/* 激活态：随侧边栏右移 */
.accordion__button.active,
.accordion__content.active {
left: 310px;
}
-
HTML 结构优化（可选但推荐）
将
