## 下拉菜单 dropdown.js 下拉菜单主体结构参照第四章 . 组件中的 下拉菜单 部分，这里主要讲下拉菜单的主要效果的实现。 **使用** * 通过data数据属性或JavaScript，dropdown插件通过切换父列表项上的.open类来切换隐藏的内容（下拉菜单）。 * 在移动设备上，打开一个下拉菜单会添加一个.dropdown背景作为一个点击区域，当你在菜单外点击时，可以关闭下拉菜单。这意味着从一个打开的下拉菜单切换到另一个不同的下拉菜单需要在移动设备上进行额外的点击。 * 注意：data-toggle=“dropdown”属性依赖于在应用程序级别关闭下拉菜单，因此最好始终使用它。 **1.** 通过data数据属性 将data toggle=“dropdown”添加到链接或按钮以切换下拉列表。 ```js <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"> search <span class="caret"></span> </button> ``` **2.** 通过JavaScript ~~~js $('.dropdown-toggle').dropdown() ~~~ 注意 :不管是通过JavaScript调用dropdown还是使用data数据属性，datatoggle=“dropdown”始终需要出现在dropdown的触发器元素上。 ***** **方法** $（' 选择指定元素 '）.dropdown（'toggle'） 切换指定导航栏或选项卡式导航的下拉菜单。 ***** **事件** Bootstrap 的下拉菜单类提供了一些事件用于监听并执行你自己的代码。 所有下拉事件都在.dropdown菜单的父元素上激发并且都有一个relatedTarget属性，其值是togginganchor元素。 | 事件类型 | 事件描述 | | --- | --- | | show.bs.dropdown | 此事件在调用show instance方法时立即激发。 | | shown.bs.dropdown | 当下拉列表对用户可见时（将等待CSS转换完成）激发此事件。| | hide.bs.dropdown | 调用hide实例方法后，将立即激发此事件。 | | hidden.bs.dropdown | 当下拉列表完成对用户隐藏（将等待CSS转换完成）时激发此事件。 | 用法如下： ~~~js $('#myDropdown').on('show.bs.dropdown', function () { // do something… }) ~~~