JS Component Bootstrap implement Drop-down menu effect code _javascript Skills

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

<! DOCTYPE html>  

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.