Bootstrap模块dropdown实现下拉框响应

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

一、源码分析： 下拉框模块 Javascripts/bootstrap/dropdown.js：

实现下拉框响应

二、功能及原理：

下拉选项卡，默认不能实现显示选中项的功能

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

三、源码分析：

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

代码如下:

ottom: 4px solid transparent; height: 0px; width: 0px; line-height: normal; display: inline-block; ">

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

rush:js;"> $(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',Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api','.dropdown-menu',Dropdown.prototype.keydown)

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

rush:js;"> 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”：是为了实现单击，展开指定的下拉列表，默认是展开与按钮后面兄弟节点：

rush:xhtml;">

Index
• 产吕
• 实用工具

• 关于我们

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

rush:xhtml;">

number

• 3343
• 555

如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。