脚本宝典收集整理的这篇文章主要介绍了js实例Bootstrap模块dropdown实现下拉框响应，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 $(document) .on('click.bs.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPRopagation() }) .on('click.bs.dropdown.data-api', toggle, Dropdown.prototyPE.toggle) .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api','.dropdown-menu',Dropdown.prototype.keydown) 

 VAR Dropdown = function (element) {  $(element).on('click.bs.dropdown', this.toggle) } 

 <ul class="nav nav-pills navbar-nav">  <li><a>Index</a></li>  <li><a>产吕</a></li>  <li > <a data-toggle="dropdown" href="#name" >实用工具</a></li> </ul> <p id="name" >  <ul class="dropdown-menu" >   <li><a>关于我们</a></li>  </ul> </p>  

 <p id="dropdown" class="dropdown"> <a id="dropdown-BTn" data-target="#dropdown" >number</a> <ul class="dropdown-menu" >   <li><a>3343</a></li> <li><a>555</a></li> </ul> </p>

本文介绍了Bootstrap下拉框模块dropdown的使用方法，供大家参考，具体内容如下

一、源码分析：
Dropdowns.scss：下拉框模块 
Javascripts/bootstrap/dropdown.js：实现下拉框响应

二、功能及原理：
下拉选项卡，默认不能实现显示选中项的功能

原理：

1、利用dropdown类作为定位点，然后让子级的列表dropdown-menu绝对定位实现，还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。
2、 需要js插件的支持

三、源码分析：
1、caret：实现向下的三角形，利用边框实现的
    1.1、边框颜色默认是字体颜色
    1.2、三角形的实现：边框要有宽度，然后相邻两边需有宽度，但颜色透明；最后还需要元素为行内块元素，才能使其高、宽为0。
    1.3、代码如下

复制代码代码如下:

<span style="border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; height: 0px; width: 0px; line-height: normal; display: inline-block; "></span>

2、在document上绑定了click事件的监听，监听类型为data-toggle=”dropdown”。
3、Js插件写的Plugin函数，和类的构造函数是用于js方式调用插件；
4、而data-*模式调用插件，用到是向document注入事件实现的，代码如下：

 $(document) .on('click.bs.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api','.dropdown-menu',Dropdown.prototype.keydown) 

代码直接调用了Dropdown定义的方法，这里经妙的设计在于插件的框架，data-*模式的调用与Js插件模式的调用，而这两种调用模式却利用了同一份代码。
5、如果用Js插件调用，基础方法都要自己调用才行，在创建实例时只会绑定toggle事件。

 var Dropdown = function (element) {  $(element).on('click.bs.dropdown', this.toggle) } 

6、clearMenu：只会清除data-toggle=”dropdown”的元素
7、dropdown-backdrop：用于移动没有单击事件的处理
8、keydown：当dropdown按钮获取焦点的时候，按下键可以展开，按上键收缩的功能
9、data-target和herf=”#id”：是为了实现单击，展开指定的下拉列表，默认是展开与按钮后面兄弟节点：

 <ul class="nav nav-pills navbar-nav">  <li><a>Index</a></li>  <li><a>产吕</a></li>  <li > <a data-toggle="dropdown" href="#name" >实用工具</a></li> </ul> <p id="name" >  <ul class="dropdown-menu" >   <li><a>关于我们</a></li>  </ul> </p>  

10、实现向上弹出子菜单，用bottom:100%（弹出子菜单bottom的定位）实现
11、应用示例

 <p id="dropdown" class="dropdown"> <a id="dropdown-btn" data-target="#dropdown" >number</a> <ul class="dropdown-menu" >   <li><a>3343</a></li> <li><a>555</a></li> </ul> </p>

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例Bootstrap模块dropdown实现下拉框响应全部内容，希望文章能够帮你解决js实例Bootstrap模块dropdown实现下拉框响应所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。