Bootstrap learning js plug-in article drop-down menu_html/css_WEB-ITnose

案例

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

 

用于导航条

 

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

[javascript]  view plaincopy

1. d4a98362ec34c1c395e50c8cea5ddbab  
2.  d9bf25ad056131a8f4943d012f115164  
3.    072ba619f3ac5b5d74a4acdb120bd111  
4.      64952123ee1a1d9b385bc3bca58612f0Toggle navigation54bdf357c58b8a65c66d7c19c8e4d114  
5.      31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
6.      31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
7.      31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
8.    65281c5ac262bf6d81768915a4a77ac0  
9.    47f9151e46f5066f9c26649088245d48Brand5db79b134e9f6b82c0b36e0489ee08ed  
10.  16b28748ea4df4d9c2150843fecfba68  
11.   
12.  e5d97e6e59289c298917804ad91b5a4b  
13.    bfa11fb4b31287f535cfbc7f7ef3c56c  
14.      6072cf9f6bd7b20ca2e4e430b3e487adf1b3ba8846c179e65eb68da95b01a812Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
15.      25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
16.      669703836e8c1866c76e0de8a4340b23  
17.        4f1fc7dbd68787cd6b18e127e4b25844Dropdown 12bdbd0acb84b74bc4f78c0ea70b0e740d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed  
18.        854df089c6ee54d934e694c7fb3c0b75  
19.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
20.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
21.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
22.          1ba080d535072e9eeeb0bd2074d14f99bed06894275b65c1ab86501b08a632eb  
23.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
24.          1ba080d535072e9eeeb0bd2074d14f99bed06894275b65c1ab86501b08a632eb  
25.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812One more separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
26.        929d1f5ca49e04fdcb27f9465b944689  
27.      bed06894275b65c1ab86501b08a632eb  
28.    929d1f5ca49e04fdcb27f9465b944689  
29.    23d5d2cbb589284daedf3afcae790a2b  
30.      1d62a832781cd1c2cbae5beb67379498  
31.        28ac4e85b089efdf0ba6d9a3eba7f5ab  
32.      16b28748ea4df4d9c2150843fecfba68  
33.      e959906e3d2c72c7cc54eebb78747420Submit65281c5ac262bf6d81768915a4a77ac0  
34.    f5a47148e367a6035fd7a2faa965022e  
35.    0176990a888bb2102795a7cca7e8f00c  
36.      25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
37.      da2dcffa8b560e677ccf53fa24c9ca66  
38.        69e6eca30720436fda7e426d2648d7f6Dropdown 4de62721c566e5e403ef983a7b26fd610d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed  
39.        136a5c3c1b8975e4cc5ce7171b1777d2  
40.          25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
41.          25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
42.          25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
43.          25eaf010b1f30ba09c7a4bcd1a2d3987bed06894275b65c1ab86501b08a632eb  
44.          25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
45.        929d1f5ca49e04fdcb27f9465b944689  
46.      bed06894275b65c1ab86501b08a632eb  
47.    929d1f5ca49e04fdcb27f9465b944689  
48.  16b28748ea4df4d9c2150843fecfba68  
49. lt;/nav>  

效果就是

 

用法一--通过data属性

 

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

      <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>

 

用法二--通过JavaScript

 

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

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

 

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

 

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

 

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

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