Bootstrap Learning JS plugin under the drop-down menu

Case

With this plugin you can add drop-down menus for almost everything, including navigation bars, tabs, and capsule buttons.

For navigation bars

The navigation bar is divided into four sections. The first part of the navigation head, the second part of the navigation column, the third part of form query form, part IV navigation column.

[JavaScript]View Plaincopy

2. <nav class="NavBar navbar-default" role="navigation" >
4. <div class="Navbar-header" >
6. <button type="button" class="Navbar-toggle" data-toggle= "collapse" data-target= "#myCollapse ">
8. <span class="sr-only" >toggle navigation</span>
10. <span class="Icon-bar" ></span>
12. <span class="Icon-bar" ></span>
14. <span class="Icon-bar" ></span>
16. </button>
18. <a class="Navbar-brand" href="#" >Brand</a>
20. </div>
24. <div class="collapse navbar-collapse" id="Mycollapse" >
26. <ul class="Nav navbar-nav" >
28. <li class="active" ><a href="#" >Link</a></li>
30. <li><a href="#" >Link</a></li>
32. <li class="dropdown" >
34. <a href="#" class="Dropdown-toggle" data-toggle="dropdown" >dropdown <b class=" Caret "></b></a>
36. <ul class="Dropdown-menu" >
38. <li><a href="#" >Action</a></li>
40. <li><a href="#" >another action</a></li>
42. <li><a href="#" >something else here</a></li>
44. <li class="divider" ></li>
46. <li><a href="#" >separated link</a></li>
48. <li class="divider" ></li>
50. <li><a href="#" >one more separated link</a></li>
52. </ul>
54. </li>
56. </ul>
58. <form class="Navbar-form navbar-left" role="search" >
60. <div class="Form-group" >
62. <input type="text" class="Form-control" placeholder="Search" >
64. </div>
66. <button type="Submit" class="btn btn-default" >Submit</button>
68. </form>
70. <ul class="nav navbar-nav navbar-right" >
72. <li><a href="#" >Link</a></li>
74. <li class="dropdown" >
76. <a href="#" class="Dropdown-toggle" data-toggle="dropdown" >dropdown <b class=" Caret "></b></a>
78. <ul class="Dropdown-menu" >
80. <li><a href="#" >Action</a></li>
82. <li><a href="#" >another action</a></li>
84. <li><a href="#" >something else here</a></li>
86. <li class="divider" ></li>
88. <li><a href="#" >separated link</a></li>
90. </ul>
92. </li>
94. </ul>
96. </div>
98. Lt;/nav>

Effect is

Usage one--through the Data property

data-toggle="dropdown"You can turn the drop-down menu on or off by adding to a link or button.

 <li class= "dropdown" > <a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown  ">dropdown <b class=" caret "></b></a> <ul class=" Dropdown-menu "> <li><a          href= "#" >Action</a></li> <li><a href= "#" >another action</a></li>          <li><a href= "#" >something else here</a></li> <li class= "Divider" ></li>          <li><a href= "#" >separated link</a></li> <li class= "Divider" ></li> <li><a href= "#" >one more separated link</a></li> </ul> </li> 

Usage two--through JavaScript

To open or close a drop-down menu via javascript:

Delete the Data-toggle attribute, then click again will not appear down the menu, next we add an onclick event to this a tag.

<script type= "Text/javascript" >     function Test ()    {        $ (' #myDropDown '). Dropdown ();        } </ Script>

Then click on the A tab to see the drop-down menu.

The event can be bound and then automatically bound to the element when the element is processed accordingly, and the associated code is executed.

$ (' #myDropdown '). On (' Show.bs.dropdown ', function () {  //To do some processing code at the time of display})

Bootstrap Learning JS plugin under the drop-down menu