Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnose

案例

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

用于导航条

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

[javascript]  view plaincopy

2.    
3.      
4.      Toggle navigation  
5.        
6.        
7.        
8.      
9.    Brand  
10.  
  
11.   
12.    
13.    
      
14.      
15. Link
  
16.      
17. Link
  
18.      
19.   
20.        Dropdown   
21.        
      
22.          
23. Action
  
24.          
25. Another action
  
26.          
27. Something else here
  
28.          
29.   
30.          
31. Separated link
  
32.          
33.   
34.          
35. One more separated link
  
36.          
37.      
  
38.      
39.    
      
40.        
41.          
42.      
  
43.      Submit  
44.      
45.    
      
46.      
47. Link
  
48.      
49.   
50.        Dropdown   
51.        
      
52.          
53. Action
  
54.          
55. Another action
  
56.          
57. Something else here
  
58.          
59.   
60.          
61. Separated link
  
62.          
63.      
  
64.      
65.  
  
66. 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 () {  // 在显示的时候做一些处理代码})