当前位置：首页 > JavaScript

js 实现抽屉

2026-03-02 07:34:33JavaScript

实现抽屉效果的 JavaScript 方法

使用 CSS 和 JavaScript 切换类

通过添加或移除 CSS 类来控制抽屉的显示与隐藏。CSS 定义抽屉的初始状态（如 transform: translateX(-100%)），JavaScript 切换类来改变状态。

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.drawer.open {
  transform: translateX(0);
}

const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => {
  drawer.classList.toggle('open');
});

动态修改内联样式

直接通过 JavaScript 修改元素的 style 属性，适用于需要动态计算位置的场景。

js 实现抽屉

const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => {
  const isOpen = drawer.style.transform === 'translateX(0px)';
  drawer.style.transform = isOpen ? 'translateX(-100%)' : 'translateX(0)';
});

使用动画库（如 GSAP）

通过 GSAP 实现更复杂的动画效果，例如弹性动画或缓动曲线。

js 实现抽屉

import { gsap } from 'gsap';

const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => {
  const isOpen = drawer.style.transform === 'translateX(0px)';
  gsap.to(drawer, {
    x: isOpen ? -300 : 0,
    duration: 0.5,
    ease: 'power2.out'
  });
});

响应式抽屉实现

结合媒体查询和 JavaScript，在移动端和桌面端适配不同的抽屉行为。

@media (max-width: 768px) {
  .drawer {
    width: 80%;
  }
}

const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => {
  if (window.innerWidth < 768) {
    drawer.classList.toggle('open');
  } else {
    // 桌面端其他逻辑
  }
});

无障碍优化

为抽屉添加 ARIA 属性和键盘事件支持，确保屏幕阅读器和键盘操作可用。

const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => {
  const isOpen = drawer.classList.toggle('open');
  toggleButton.setAttribute('aria-expanded', isOpen);
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && drawer.classList.contains('open')) {
    drawer.classList.remove('open');
    toggleButton.setAttribute('aria-expanded', 'false');
  }
});