Bootstrap学习js插件篇之下拉菜单_html/css

案例

通过此插件可以为几乎所有东西添加下拉菜单，包括导航条、标签页、胶囊式按钮。

用于导航条

导航条分为四个部分。第一部分导航头，第二部分导航列，第三部分form查询表单，第四部分导航列。

[javascript] view plaincopy

4. Toggle navigation
9. Brand
15. Link
17. Link
20. Dropdown
23. Action
25. Another action
27. Something else here
31. Separated link
35. One more separated link
42. Link
45. Dropdown
48. Action
50. Another action
52. Something else here
56. Separated link
61. lt;/nav>

效果就是

用法一--通过data属性

通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。

 
 Dropdown  
Action
 
Another action
 
Something else here
 
 
Separated link
 
 
One more separated link
 

用法二--通过JavaScript

通过JavaScript打开或关闭下拉菜单：

删除data-toggle属性，那么再次点击就不会出现下来菜单了，接下来我们通过给这个a标签添加一个onclick事件。

然后点击a标签就可以出现下拉菜单了。

可以绑定事件，然后在元素进行相应处理的时候会自动绑定到元素，并进行执行相关的代码。

$('#myDropdown').on('show.bs.dropdown', function () { // 在显示的时候做一些处理代码})