HTML实现侧边个人信息抽屉详解

<aside id="profile-drawer" class="drawer drawer--closed" aria-hidden="true" aria-labelledby="profile-trigger">
  <header class="drawer__header">
    <h2 id="profile-trigger">我的信息</h2>
    <button class="drawer__close" aria-label="关闭个人信息抽屉">×</button>
  </header>
  <div class="drawer__body">
    <p>姓名：张三</p>
    <p>邮箱：zhangsan@example.com</p>
  </div>
</aside>
<p><button id="profile-trigger-btn" aria-expanded="false" aria-controls="profile-drawer">?</button></p>

• aria-hidden="true" 初始隐藏，JS 打开时设为 false；关闭时设回 true
• aria-expanded 同步按钮状态，辅助技术能感知当前是否展开
• aria-controls 明确关联触发器与抽屉容器
• 不要把抽屉写在 外或
  深层嵌套里——影响键盘焦点流和屏幕阅读器顺序

CSS 关键：用 transform + transition 实现高性能滑动

别用 left/right 动画，会触发重排；用 transform: translateX() 只触发合成，流畅且兼容性好：

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}
<p>.drawer--open {
transform: translateX(0);
}</p><p>/<em> 遮罩层（可选但推荐） </em>/
.drawer::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s;
}</p><p>.drawer--open::before {
opacity: 1;
}</p>

• 遮罩层用伪元素 ::before 而非额外 DOM 元素，减少结构干扰
• 动画时间统一用 0.3s，太快用户反应不过来，太慢显得卡顿
• 移动端需加 touch-action: none 防止手势冲突（尤其 iOS Safari）

JavaScript 控制逻辑：别漏掉焦点与 Esc 键处理

只切 class 不够，还得管理焦点、键盘关闭、点击遮罩关闭等真实场景需求：

const drawer = document.getElementById('profile-drawer');
const trigger = document.getElementById('profile-trigger-btn');
const closeBtn = document.querySelector('.drawer__close');
<p>function openDrawer() {
drawer.classList.remove('drawer--closed');
drawer.classList.add('drawer--open');
drawer.setAttribute('aria-hidden', 'false');
trigger.setAttribute('aria-expanded', 'true');
// 立即把焦点移到抽屉内首个可聚焦元素（如关闭按钮）
closeBtn.focus();
}</p><p>function closeDrawer() {
drawer.classList.remove('drawer--open');
drawer.classList.add('drawer--closed');
drawer.setAttribute('aria-hidden', 'true');
trigger.setAttribute('aria-expanded', 'false');
trigger.focus(); // 关闭后焦点回到触发按钮
}</p><p>trigger.addEventListener('click', openDrawer);
closeBtn.addEventListener('click', closeDrawer);
// 点击遮罩关闭（注意事件委托或监听 drawer 自身）
drawer.addEventListener('click', (e) => {
if (e.target === drawer) closeDrawer();
});
// Esc 键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && drawer.classList.contains('drawer--open')) {
closeDrawer();
}
});</p>

• 必须手动管理 focus()，否则键盘用户无法操作抽屉内控件
• 监听 drawer 自身点击（而非 ::before）更可靠，因为伪元素无法被 JS 直接捕获事件
• 不要用 display: none 切换——会导致焦点丢失且动画失效

抽屉最难的不是滑出来，而是让键盘用户、屏幕阅读器用户、触屏用户、缩放用户都能一致地打开、操作、关闭。所有“超详细教程”里最容易跳过的，就是这些非视觉路径的细节。

好了，本文到此结束，带大家了解了《HTML实现侧边个人信息抽屉详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！