Bootstrap Drop-down Menu This chapter explains the dropdown menu, but does not involve the interactive part, this chapter will specifically explain the Drop-down menu interaction. Using the Drop-down menu (Dropdown) plug-in, you can add a drop-down menu to any component (such as a navigation bar, a tab, a capsule navigation menu, a button, and so on).
If you want to refer to the functionality of the plug-in separately, you need to refer to dropdown.js. Alternatively, as mentioned in the Bootstrap Plug-in Overview chapter, you can refer to the Bootstrap.js or compressed version of Bootstrap.min.js.
One, usage
you can toggle the hidden contents of the Drop-down menu (Dropdown) Plugin:
1. Through the Data property: Add Data-toggle= "dropdown" to the link or button to toggle the Pull-down menu as follows:
<div class= "dropdown" >
<a data-toggle= "dropdown" href= "#" > Drop-down menu (dropdown) triggers </a>
<ul class= "Dropdown-menu" role= "menu" aria-labelledby= "Dlabel" > ...
</ul>
</div>
If you need to keep the link intact (useful when the browser does not enable JavaScript), use the Data-target property instead of href= "#":
<div class= "dropdown" >
<a id= "Dlabel" role= "button" data-toggle= "dropdown" data-target= "#" href= "/ Page.html ">
drop-down menu (Dropdown) <span class=" caret "></span>
</a>
<ul class=" Dropdown-menu "role=" menu aria-labelledby= "Dlabel" > ...
</ul>
</div>
2, through JavaScript: Invoke the Drop-down menu to switch through JavaScript, use the following method:
$ ('. Dropdown-toggle '). Dropdown ()
Two, Drop-down menu Simple Example
in general use, as with component methods, the code is as follows:
Declarative usage
<div class= "dropdown" >
<button class= "btn btn-primary" data-toggle= "dropdown" >
Pull-down menu
<span class= "caret" ></span>
</button>
<ul class= "Dropdown-menu" >
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Products </a></li>
<li><a href= "#" > Information </a></li>
<li><a href= "#" > About </a></li>
</ul>
</div>
Key core of declarative usage:
1. Peripheral containers Use class= "dropdown" packages;
2. Internal Click button Event binding data-toggle= "dropdown";
3. The menu element uses class= "Dropdown-menu".
If the button is outside the container, it can be bound by Data-target.
<button class= "btn btn-primary" id= "btn" data-toggle= "dropdown"
data-target= "#dropdown" >
In JavaScript calls, there are no attributes, and the method is not easy to use, and here are four basic events.
//dropdown menu method, but still need data-*
$ (' #btn '). Dropdown ();
$ (' #btn '). Dropdown (' toggle ');
The dropdown menu supports 4 kinds of events, corresponding to before, after, before and after closing.
Events, other identical
$ (' #dropdown '). On (' Show.bs.dropdown ', function () {
alert (' Fire immediately when the show method is called! ');
});
The use of the dropdown menu in the tab page
Effect Chart:
If you want to further study, you can click here to learn, and then attach 3 wonderful topics:
Bootstrap Learning Course
Bootstrap Practical Course
Bootstrap Plugin Usage Tutorial
The above is the entire content of this article, I hope to help you learn.