bootstrap下拉选择框选中事件_Bootstrap模块dropdown实现下拉框响应

这篇文章主要为大家详细介绍了Bootstrap下拉框模块dropdown实现下拉框响应，感兴趣的朋友可以参考一下

本文介绍了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、代码如下

2、在document上绑定了click事件的监听，监听类型为data-toggle=”dropdown”。

3、Js插件写的Plugin函数，和类的构造函数是用于js方式调用插件；

4、而data-*模式调用插件，用到是向document注入事件实现的，代码如下：

$(document)

.on('click.bs.dropdown.data-api&#