Bootstrap 下拉菜单参考

• 

  下拉菜单 CSS 类

  下表总结了 Bootstrap 下拉菜单 CSS 类：

  类名	描述	示例
  .dropdown	创建一个可切换菜单，允许用户从预定义列表中选择一个值	尝试一下
  .dropdown-divider	用于用细边框分隔下拉菜单中的链接	尝试一下
  .dropdown-header	用于在下拉菜单中添加标题	尝试一下
  .dropdown-item	创建一个下拉项（添加到.dropdown菜单内的链接或按钮）	尝试一下
  .dropdown-item-text	用于将纯文本添加到下拉项，或用于默认链接样式的链接	尝试一下
  .dropdown-menu	为下拉菜单容器添加默认样式	尝试一下
  .dropdown-menu-right	右对齐下拉菜单	尝试一下
  .dropdown-toggle	用于应该隐藏和显示（切换）下拉菜单的按钮	尝试一下
  .dropup	指示下拉菜单（向上而不是向下）	尝试一下
  .disabled	禁用下拉菜单项	尝试一下
  .active	向下拉菜单中添加可以激活当前下拉菜单选项	尝试一下

• 

  下拉菜单选项

  无
• 

  下拉菜单方法

  下表列出了所有可用的下拉菜单。

  方法	描述	示例
  .dropdown("toggle")	切换下拉菜单；如果设置，默认情况下它将打开下拉菜单	尝试一下
  .dropdown("update")	更新元素下拉菜单的位置
  .dropdown("dispose")	销毁元素的下拉菜单

• 

  下拉菜单事件

  下表列出了所有可用的下拉菜单事件。

  事件	描述	示例
  show.bs.dropdown	在即将显示下拉菜单时发生	尝试一下
  shown.bs.dropdown	在完全显示下拉菜单时发生（在CSS转换完成之后）	尝试一下
  hide.bs.dropdown	在下拉菜单将被隐藏时发生	尝试一下
  hidden.bs.dropdown	当下拉列表完全隐藏时发生（在CSS转换完成之后）	尝试一下

  提示：使用 jQuery 的 event.relatedTarget 获取触发下拉菜单的元素：

  $(".dropdown").on("show.bs.dropdown", function(event){
      var x = $(event.relatedTarget).text(); // 获取元素的文本
      alert(x);
  });
  

  尝试一下
• 

  相关页面

  Bootstrap 下拉菜单

  Bootstrap CSS类参考