Bootstrap 下拉菜单

前面 CSS 章节介绍过下拉菜单的样式，本节讲它"动起来"的部分——下拉插件负责点击后的展开与收起、点击页面外部自动关闭等交互，只需给触发器加 data-toggle="dropdown" 即可启用。

data 属性触发

在 .dropdown 容器内放一个带 data-toggle="dropdown" 的按钮和 .dropdown-menu：

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        下拉菜单 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">菜单项一</a></li>
        <li><a href="#">菜单项二</a></li>
    </ul>
</div>

显示效果：点击按钮菜单向下展开，点击页面其他任意处或再次点击按钮即收起。

与按钮组、导航栏结合

插件同样作用于按钮组下拉与导航栏下拉，原理完全一致。下面是一个分裂式按钮：

<div class="btn-group">
    <button class="btn btn-default">保存</button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">另存为</a></li>
        <li><a href="#">导出 PDF</a></li>
    </ul>
</div>

显示效果：点击右侧带小箭头的按钮，出现"另存为、导出 PDF"菜单，主按钮与菜单按钮左右拼接。

菜单项增强

在 .dropdown-menu 内部可混用以下结构增强菜单：

<li class="dropdown-header">文件操作</li>
<li><a href="#">新建</a></li>
<li class="divider"></li>
<li class="disabled"><a href="#">删除（不可用）</a></li>

显示效果：出现一段灰色小标题、一条分隔线，以及一个灰色不可点击的禁用项。

编程式 API 与事件

也可用 jQuery 控制展开收起，并监听四个阶段事件：

<script>
$('.dropdown-toggle').dropdown('toggle'); // 切换展开状态
$('.dropdown').on('show.bs.dropdown', function () {
    // 菜单即将展开时执行
});
$('.dropdown').on('hidden.bs.dropdown', function () {
    // 菜单完全收起后执行
});
</script>

说明：事件名依次为 show/shown/hide/hidden 加 .bs.dropdown；通过 JavaScript 动态插入的菜单，也需要调用 $('...').dropdown() 手动初始化。

小结：下拉插件的核心就是一个 data-toggle="dropdown" 属性；点击外部自动关闭已内置，进阶需求再使用 dropdown('toggle') 方法与 bs.dropdown 事件即可。