垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 下拉菜单 ​

概述 ​

Bootstrap 下拉菜单是一个可切换的上下文覆盖层，用于显示链接列表等内容。它们通过 Bootstrap 的下拉 JavaScript 插件实现交互。

基本下拉菜单 ​

html
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        下拉按钮
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
        <li><a class="dropdown-item" href="#">其他操作</a></li>
    </ul>
</div>

下拉菜单变体 ​

html
<!-- Primary -->
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Primary
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <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>

<!-- Success -->
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Success
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

分割按钮下拉菜单 ​

html
<div class="btn-group">
    <button type="button" class="btn btn-primary">操作</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <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>

尺寸 ​

html
<!-- 大尺寸 -->
<div class="btn-group">
    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        大按钮
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

<!-- 小尺寸 -->
<div class="btn-group">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        小按钮
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

方向 ​

html
<!-- 向上 -->
<div class="btn-group dropup">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        向上
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

<!-- 向右 -->
<div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        向右
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

<!-- 向左 -->
<div class="btn-group dropstart">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        向左
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

菜单项 ​

html
<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">常规链接</a></li>
    <li><a class="dropdown-item active" href="#">活动链接</a></li>
    <li><a class="dropdown-item disabled" href="#">禁用链接</a></li>
</ul>

菜单对齐 ​

html
<!-- 右对齐 -->
<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        右对齐菜单
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

<!-- 响应式对齐 -->
<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        响应式对齐
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><a class="dropdown-item" href="#">操作</a></li>
        <li><a class="dropdown-item" href="#">另一个操作</a></li>
    </ul>
</div>

菜单内容 ​

html
<ul class="dropdown-menu">
    <!-- 标题 -->
    <li><h6 class="dropdown-header">下拉菜单标题</h6></li>
    <li><a class="dropdown-item" href="#">操作</a></li>
    <li><a class="dropdown-item" href="#">另一个操作</a></li>
    
    <!-- 分隔线 -->
    <li><hr class="dropdown-divider"></li>
    
    <!-- 文本 -->
    <li><span class="dropdown-item-text">下拉菜单文本</span></li>
    
    <!-- 表单 -->
    <li>
        <form class="px-4 py-3">
            <div class="mb-3">
                <label for="exampleDropdownFormEmail1" class="form-label">邮箱地址</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="mb-3">
                <label for="exampleDropdownFormPassword1" class="form-label">密码</label>
                <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="密码">
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="dropdownCheck">
                    <label class="form-check-label" for="dropdownCheck">
                        记住我
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">登录</button>
        </form>
    </li>
</ul>

自动关闭行为 ​

html
<!-- 默认行为：点击外部或内部都关闭 -->
<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
        默认下拉菜单
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">菜单项</a></li>
        <li><a class="dropdown-item" href="#">菜单项</a></li>
    </ul>
</div>

<!-- 点击外部关闭 -->
<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
        点击外部关闭
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">菜单项</a></li>
        <li><a class="dropdown-item" href="#">菜单项</a></li>
    </ul>
</div>

<!-- 点击内部关闭 -->
<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
        点击内部关闭
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">菜单项</a></li>
        <li><a class="dropdown-item" href="#">菜单项</a></li>
    </ul>
</div>

<!-- 手动关闭 -->
<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
        手动关闭
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">菜单项</a></li>
        <li><a class="dropdown-item" href="#">菜单项</a></li>
    </ul>
</div>

深色下拉菜单 ​

html
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        深色下拉菜单
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item active" href="#">操作</a></li>
        <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>

实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 下拉菜单示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 下拉菜单示例</h1>
        
        <!-- 用户菜单 -->
        <h2>用户菜单</h2>
        <div class="dropdown mb-4">
            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <svg width="16" height="16" fill="currentColor" class="bi bi-person-circle me-2" viewBox="0 0 16 16">
                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                </svg>
                张三
            </button>
            <ul class="dropdown-menu">
                <li><h6 class="dropdown-header">账户设置</h6></li>
                <li><a class="dropdown-item" href="#">个人资料</a></li>
                <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>
                <li><a class="dropdown-item text-danger" href="#">退出登录</a></li>
            </ul>
        </div>
        
        <!-- 操作菜单 -->
        <h2>操作菜单</h2>
        <div class="btn-group mb-4">
            <button type="button" class="btn btn-success">保存</button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">切换下拉菜单</span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">保存并继续</a></li>
                <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>
        
        <!-- 语言选择 -->
        <h2>语言选择</h2>
        <div class="dropdown mb-4">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                🇨🇳 简体中文
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item active" href="#">🇨🇳 简体中文</a></li>
                <li><a class="dropdown-item" href="#">🇭🇰 繁體中文</a></li>
                <li><a class="dropdown-item" href="#">🇺🇸 English</a></li>
                <li><a class="dropdown-item" href="#">🇯🇵 日本語</a></li>
                <li><a class="dropdown-item" href="#">🇰🇷 한국어</a></li>
            </ul>
        </div>
        
        <!-- 筛选菜单 -->
        <h2>筛选菜单</h2>
        <div class="dropdown mb-4">
            <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                筛选条件
            </button>
            <ul class="dropdown-menu">
                <li>
                    <form class="px-4 py-3">
                        <div class="mb-3">
                            <label class="form-label">价格范围</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="price1">
                                <label class="form-check-label" for="price1">
                                    ¥0 - ¥100
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="price2">
                                <label class="form-check-label" for="price2">
                                    ¥100 - ¥500
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="price3">
                                <label class="form-check-label" for="price3">
                                    ¥500+
                                </label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">品牌</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="brand1">
                                <label class="form-check-label" for="brand1">
                                    品牌 A
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="brand2">
                                <label class="form-check-label" for="brand2">
                                    品牌 B
                                </label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">应用筛选</button>
                        <button type="reset" class="btn btn-outline-secondary btn-sm">重置</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

JavaScript 方法 ​

javascript
// 获取下拉菜单实例
const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

// 显示下拉菜单
dropdown.show()

// 隐藏下拉菜单
dropdown.hide()

// 切换下拉菜单
dropdown.toggle()

// 更新下拉菜单位置
dropdown.update()

// 销毁下拉菜单
dropdown.dispose()

事件 ​

javascript
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
    // 下拉菜单即将显示
})

myDropdown.addEventListener('shown.bs.dropdown', event => {
    // 下拉菜单已显示
})

myDropdown.addEventListener('hide.bs.dropdown', event => {
    // 下拉菜单即将隐藏
})

myDropdown.addEventListener('hidden.bs.dropdown', event => {
    // 下拉菜单已隐藏
})

最佳实践 ​

1. 可访问性 ​

html
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        下拉按钮
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">操作</a></li>
    </ul>
</div>

2. 禁用项 ​

html
<ul class="dropdown-menu">
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">禁用操作</a></li>
</ul>

下一步 ​

下一章：Bootstrap 折叠 →