jquery--点击后滑动展开或关闭DIV层

封面图 • 2025-09-24 • jQuery

在 jQuery 中，你可以通过点击按钮来实现 **滑动展开或关闭一个 DIV 层** 的效果。通常我们会使用 `slideToggle()` 方法，它会根据当前状态自动切换“展开”或“折叠”。

下面是一个简单的示例代码：

---

### ✅ HTML + jQuery 实现滑动展开/关闭 DIV

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Slide Toggle Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #content {
      display: none; /* 初始隐藏 */
      background-color: #f0f0f0;
      padding: 10px;
      border: 1px solid #ccc;
      margin-top: 10px;
    }
    #toggleBtn {
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div id="toggleBtn">点击展开/折叠内容</div>
  <div id="content">
    这是需要滑动显示或隐藏的内容。
  </div>

</body>
</html>
```

---

### 📝 功能说明：

- `#toggleBtn` 是触发按钮。
- `#content` 是要滑动显示或隐藏的 DIV 内容。
- `slideToggle()` 是 jQuery 提供的方法，用于滑动动画切换元素的可见性。

---

### 🔄 其他相关方法：

| 方法 | 说明 |
|------|------|
| `slideDown()` | 滑动显示元素 |
| `slideUp()` | 滑动隐藏元素 |
| `slideToggle()` | 根据当前状态切换显示或隐藏 |

---

### 💡 扩展建议：

如果你希望点击其他地方（比如页面空白处）也能关闭这个 DIV，可以添加事件监听器来实现。

---

如需我帮你写一个带动画、图标切换的版本，也可以告诉我！