Bootstrap 下拉菜单插件 ( Dropdown )

Bootstrap 3 下拉菜单插件 ( Dropdown ) 用于增强 Bootstrap 下拉菜单的交互

使用下拉菜单( Dropdown ) 插件，我们可以向任何组件( 比如导航栏、标签页、胶囊式导航菜单、按钮等 ) 添加下拉菜单

Bootstrap 3 提供了两种方式用于切换下拉菜单( Dropdown ) 插件的隐藏内容

1. 通过 data 属性

可以向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

<div class="dropdown">
  <a data-toggle="dropdown" href="#">下拉菜单( Dropdown ) 触发器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

如果想要要保持链接完整( 在浏览器不启用 JavaScript 时有用 ) ，那么可以使用 data-target 属性代替 href="#"

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">下拉菜单( Dropdown )<span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

2. 通过 JavaScript

通过 JavaScript 调用下拉菜单切换

$('.dropdown-toggle').dropdown()

范例 1

下面的范例演示了在导航栏内的下拉菜单的用法

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">简单教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">HTML 5</a></li>
            <li><a href="#">CSS 3</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    后端 
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Python</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">JAVA</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

运行范例 »

运行以上范例，输出结果如下

范例 2

下面的范例演示了在标签页内的下拉菜单的用法

<p>带有下拉菜单的标签页</p>
<ul class="nav navbar-nav">
    <li class="active"><a href="#">HTML 5</a></li>
    <li><a href="#">CSS 3</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            后端 
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Python</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">JAVA</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
            <li class="divider"></li>
            <li><a href="#">另一个分离的链接</a></li>
        </ul>
    </li>
    <li><a href="#">JavaScript</a></li>
</ul>

运行范例 »

运行以上范例，输出结果如下

带有下拉菜单的标签页

方法

下拉菜单插件有一个简单的方法用来显示或隐藏下拉菜单

$().dropdown('toggle')

下面的范例演示了下拉菜单( Dropdown ) 插件方法的使用方法

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
        <div class="navbar-header">
            <a class="navbar-brand" href="#">简单教程</a>
        </div>
        <div id="myexample">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">HTML 5</a></li>
                <li><a href="#">CSS 3</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        后端 
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Python</a></li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">JAVA</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                </li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div>
    </div>
</nav>
<script>
$(function() { $(".dropdown-toggle").dropdown('toggle');});
</script>

运行范例 »

运行以上范例，输出结果如下

固定到顶部