Bootstrap 下拉菜单
使用 Bootstrap 创建下拉菜单的方法和示例
问题
如何使用 Bootstrap 制作下拉菜单？
解答
基本下拉菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 下拉菜单</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
<!-- 基本下拉菜单 -->
<div class="dropdown">
<!-- 触发按钮：需要 dropdown-toggle 类和 data-bs-toggle 属性 -->
<button class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
选择操作
</button>
<!-- 下拉菜单内容 -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">编辑</a></li>
<li><a class="dropdown-item" href="#">复制</a></li>
<li><hr class="dropdown-divider"></li> <!-- 分隔线 -->
<li><a class="dropdown-item" href="#">删除</a></li>
</ul>
</div>
<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>不同方向的下拉菜单
<!-- 向上弹出 -->
<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
向上
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项 1</a></li>
<li><a class="dropdown-item" href="#">选项 2</a></li>
</ul>
</div>
<!-- 向右弹出 -->
<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
向右
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项 1</a></li>
<li><a class="dropdown-item" href="#">选项 2</a></li>
</ul>
</div>
<!-- 向左弹出 -->
<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
向左
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项 1</a></li>
<li><a class="dropdown-item" href="#">选项 2</a></li>
</ul>
</div>通过 JavaScript 控制
// 获取下拉菜单元素
const dropdownEl = document.querySelector('.dropdown-toggle')
// 创建实例
const dropdown = new bootstrap.Dropdown(dropdownEl)
// 手动控制
dropdown.show() // 显示
dropdown.hide() // 隐藏
dropdown.toggle() // 切换
// 监听事件
dropdownEl.addEventListener('show.bs.dropdown', function () {
console.log('菜单即将显示')
})
dropdownEl.addEventListener('shown.bs.dropdown', function () {
console.log('菜单已显示')
})禁用菜单项
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">正常选项</a></li>
<!-- 添加 disabled 类禁用选项 -->
<li><a class="dropdown-item disabled" href="#">禁用选项</a></li>
<!-- 激活状态 -->
<li><a class="dropdown-item active" href="#">当前选中</a></li>
</ul>关键点
- 容器使用
dropdown类，按钮需要dropdown-toggle类和data-bs-toggle="dropdown"属性 - 菜单列表使用
dropdown-menu类，菜单项使用dropdown-item类 - 改变弹出方向：
dropup（上）、dropend（右）、dropstart（左） - 必须引入 Bootstrap 的 JS 文件（或 bundle 版本）才能使下拉功能生效
- 可通过
bootstrap.Dropdown实例用 JavaScript 控制显示隐藏
目录