Bootstrap3.0学习教程十八：JS插件下拉菜单

本文主要来学习一下JavaScript插件--下拉菜单。

下拉菜单

通过此插件可以为几乎所有东西添加下拉菜单，包括导航条、标签页、胶囊式按钮，本文主要来介绍下导航条里面的下拉菜单吧，其实道理都是一样的。

用于导航条

先来看一下之前做过的一个简单的导航条

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

用法一--通过data属性

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

      
class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/dropdownhttp://www.cuoxin.com/wen/2019/10-29/">        "http://www.cuoxin.com/wen/2019/10-29/#http://www.cuoxin.com/wen/2019/10-29/" http://www.cuoxin.com/wen/2019/10-29/class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/dropdown-togglehttp://www.cuoxin.com/wen/2019/10-29/" data-toggle=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/dropdownhttp://www.cuoxin.com/wen/2019/10-29/">Dropdown class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/carethttp://www.cuoxin.com/wen/2019/10-29/">        
class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/dropdown-menuhttp://www.cuoxin.com/wen/2019/10-29/">          
"http://www.cuoxin.com/wen/2019/10-29/#http://www.cuoxin.com/wen/2019/10-29/">Action
          
"http://www.cuoxin.com/wen/2019/10-29/#http://www.cuoxin.com/wen/2019/10-29/">Another action
          
"http://www.cuoxin.com/wen/2019/10-29/#http://www.cuoxin.com/wen/2019/10-29/">Something http://www.cuoxin.com/wen/2019/10-29/else here
          
class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/piderhttp://www.cuoxin.com/wen/2019/10-29/">
          
"http://www.cuoxin.com/wen/2019/10-29/#http://www.cuoxin.com/wen/2019/10-29/">Separated link
          
class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/piderhttp://www.cuoxin.com/wen/2019/10-29/">
          
"http://www.cuoxin.com/wen/2019/10-29/#http://www.cuoxin.com/wen/2019/10-29/">One more separated link
        
      

即上面的那个小例子就是如此。

用法二--通过JavaScript

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

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

"http://www.cuoxin.com/wen/2019/10-29/#http://www.cuoxin.com/wen/2019/10-29/" http://www.cuoxin.com/wen/2019/10-29/class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/dropdown-togglehttp://www.cuoxin.com/wen/2019/10-29/" id=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/myDropDownhttp://www.cuoxin.com/wen/2019/10-29/" data-toggle=http://www.cuoxin.com/wen/2019/10-29/"" onClick=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/Test()http://www.cuoxin.com/wen/2019/10-29/">Dropdown class=http://www.cuoxin.com/wen/2019/10-29/"http://www.cuoxin.com/wen/2019/10-29/carethttp://www.cuoxin.com/wen/2019/10-29/">

并添加相应的JavaScript的函数代码

就这样保存，然后F5刷新页面重新点击，就可以看到下拉菜单了（不过这里不太清楚为什么要点击两次下拉菜单才会出来）。

事件

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

• $(http://www.cuoxin.com/wen/2019/10-29/'http://www.cuoxin.com/wen/2019/10-29/#myDropdownhttp://www.cuoxin.com/wen/2019/10-29/').on(http://www.cuoxin.com/wen/2019/10-29/'http://www.cuoxin.com/wen/2019/10-29/show.bs.dropdownhttp://www.cuoxin.com/wen/2019/10-29/'http://www.cuoxin.com/wen/2019/10-29/, function () { http://www.cuoxin.com/wen/2019/10-29///http://www.cuoxin.com/wen/2019/10-29/ 在显示的时候做一些处理代码 })

总结

看似很简单的东西，有时候实践起来还是有难度的，多实践肯定不会错。