Bootstrap Dropdown Plugin
Bootstrap DropdownThe previous chapter covered dropdown menus, but did not cover the interaction part. This chapter will explain the interaction of dropdown menus in detail. Using the Dropdown plugin, you can add dropdown menus to any component (such as navigation bars, tabs, pill navigation menus, buttons, etc.).
If you want to reference the functionality of this plugin separately, you need to referencedropdown.js.Bootstrap Plugin Overviewas mentioned in the chapter, you can referencebootstrap.jsor the compressed version ofbootstrap.min.js。
Usage
You can toggle the hidden content of the Dropdown plugin:
- Via data attributes: Add to a link or buttondata-toggle="dropdown"to toggle the dropdown menu, as shown below:
<div class="dropdown">
<a data-toggle="dropdown" href="../index.html">下拉菜单（Dropdown）触发器</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
If you need to keep the link intact (useful when JavaScript is not enabled in the browser), usedata-targetattribute insteadhref="../index.html"：
<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>
- Via JavaScript: To call the dropdown toggle via JavaScript, use the following method:
$('.dropdown-toggle').dropdown()
Example
Inside a navbar
The following example demonstrates the usage of dropdown menus inside a navbar:
Example
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Example</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">Another separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Try it »
The result is shown below:
Inside tabs
The following example demonstrates the usage of dropdown menus inside tabs:
Example
<p>Tabs with dropdown menus</p>
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a></li>
<li>
<a href="#">SVN</a></li>
<li>
<a href="#">iOS</a></li>
<li>
<a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Java
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Swing</a></li>
<li>
<a href="#">jMeter</a></li>
<li>
<a href="#">EJB</a></li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a></li>
</ul>
</li>
<li>
<a href="#">PHP</a></li>
</ul>
Try it »
The result is shown below:
Options
There are no options.
Methods
The dropdown toggle has a simple method to show or hide the dropdown menu.
$().dropdown('toggle')
Example
The following example demonstrates the usage of the Dropdown plugin methods:
Example
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Example</a>
</div>
<div id="myexample">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">iOS</a>
</li>
<li>
<a href="#">SVN</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a id="action-1" href="#">jmeter</a>
</li>
<li>
<a href="#">EJB</a>
</li>
<li>
<a href="#">Jasper Report</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Another separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script>
$(function() {
$(".dropdown-toggle").dropdown('toggle');
});
</script>
Try it »
The result is shown below:
Other extensions
