当前位置：首页 > JavaScript

js实现drawer

2026-04-06 08:00:31JavaScript

实现 Drawer 的基本方法

使用 HTML、CSS 和 JavaScript 创建一个抽屉（Drawer）效果可以通过多种方式实现。以下是两种常见的方法：

方法一：纯 CSS 和 JavaScript 实现

HTML 结构

<div class="drawer-container">
  <button id="toggleDrawer">Toggle Drawer</button>
  <div class="drawer">
    <p>Drawer content goes here</p>
  </div>
</div>

CSS 样式

js实现drawer

.drawer {
  width: 300px;
  height: 100vh;
  background: #f1f1f1;
  position: fixed;
  top: 0;
  left: -300px;
  transition: left 0.3s ease;
  z-index: 1000;
}

.drawer.open {
  left: 0;
}

JavaScript 代码

const toggleButton = document.getElementById('toggleDrawer');
const drawer = document.querySelector('.drawer');

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

方法二：使用第三方库（如 Material UI）

如果项目中使用 React 和 Material UI，可以更方便地实现 Drawer：

js实现drawer

import React, { useState } from 'react';
import { Drawer, Button } from '@material-ui/core';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
      <Drawer anchor="left" open={isOpen} onClose={() => setIsOpen(false)}>
        <div style={{ width: 250 }}>
          <p>Drawer content goes here</p>
        </div>
      </Drawer>
    </div>
  );
}

export default App;

实现 Drawer 的高级功能

添加动画效果

可以通过 CSS 过渡或动画库（如 Animate.css）增强 Drawer 的视觉效果：

.drawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-100%);
}

.drawer.open {
  transform: translateX(0);
}

响应式设计

确保 Drawer 在不同屏幕尺寸下表现良好：

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

点击外部关闭 Drawer

添加点击外部区域关闭 Drawer 的功能：

document.addEventListener('click', (event) => {
  if (!drawer.contains(event.target) && event.target !== toggleButton) {
    drawer.classList.remove('open');
  }
});