Bootstrap dropdown menu (Dropdown) widget
Bootstrap dropdown menu This chapter explains the drop-down menu, but not related to the interaction part, this chapter will explain in detail the interaction of the drop-down menu. Use the pull-down menu (Dropdown) plug-in, you can add a drop-down menu to any of the components (such as navigation bar, tabs, capsules, navigation menus, buttons, etc.).
If you want to refer to the individual plug-in features, you need to referencedropdown.js.Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.
usage
You can toggle hide dropdown menu (Dropdown) plug-in:
- Through data attributes: a link or button to add data-toggle = "dropdown"drop-down menu to switch, as follows:
<Div class = "dropdown">
<a data-toggle="dropdown" href="#"> drop-down menu (Dropdown) trigger </a>
<Ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ Ul>
</ Div>
If you need to keep the link intact (useful when the browser is not enabled JavaScript), please usedata-target attribute instead of href = "#":
<Div class = "dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Pull-down menu (Dropdown) <span class = "caret"> </ span>
</a>
<Ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ Ul>
</ Div>
- By JavaScript: JavaScript by calling the drop-down menu to switch, please use the following method:
$ ( '. Dropdown-toggle'). Dropdown ()
Examples
In the navigation bar
The following example demonstrates the use of the navigation bar drop-down menu:
Examples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container-fluid">
<Div class = "navbar-header">
<A class = "navbar-brand" href = "#"> tutorial </ 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 = "#"> isolated link </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#"> another isolated link </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
try it" The results are as follows:
In a tab within
The following example demonstrates the use of the tab in the drop-down menu:
Examples
<P> tag with a page pull-down menu </ 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 = "#"> isolated link </ a> </ li>
</ Ul>
</ Li>
<Li>
<A href = "#"> PHP < / a> </ li>
</ Ul>
try it" The results are as follows:
Options
There are no options.
method
Drop-down menu to switch there is a simple way to display or hide the drop-down menu.
$ (). Dropdown ( 'toggle')
Examples
The following example demonstrates the pull-down menu (Dropdown) plug-in method:
Examples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container-fluid">
<Div class = "navbar-header">
<A class = "navbar-brand" href = "#"> W3Cschool < / 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 = "#"> isolated link </ a>
</ Li>
<Li class = "divider"> </ li>
<Li>
<A href = "#"> another isolated link </ a>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (function () {$ ( "dropdown-toggle.") Dropdown ( 'toggle');.}); </ Script>
try it" The results are as follows: