Bootstrap JS Dropdown

JS Dropdown (dropdown.js)

下拉菜单是一个可切换的菜单，让用户可用从预定义列表中选择一个值。

学习更多 Dropdowns 的知识, 请访问本站的 Bootstrap 下拉菜单教程.

Dropdown 插件样式

通过 data-* 属性

将 data-toggle="dropdown" 添加到链接或按钮以切换下拉菜单。

实例

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>

通过 JavaScript

手动:

实例

 $('.dropdown-toggle').dropdown();

注意：无论是否调用 dropdown() 方法，都需要 data-toggle="dropdown" 属性。

Dropdown Options

Dropdown 方法

下表列出了所有可用的 Dropdown 方法。

Dropdown 事件

下表列出了所有可用的 Dropdown 事件。

提示：使用 jQuery 获取触发下拉列表的元素:

实例

 $(".dropdown").on("show.bs.dropdown", function(event){
 var x = $(event.relatedTarget).text(); // Get the text of the element
  alert(x);
});

更多实例

改变插入符号图标

以下实例在单击下拉列表时将插入符号图标从向下更改为向上:

实例

/* CSS: */
<style>
.caret.caret-up {
 border-top-width: 0;
 border-bottom: 4px solid #fff;
 }
</style>
/* JS: */
<script>
$(document).ready(function(){
 $(".dropdown").on("hide.bs.dropdown", function(){
  $(".btn").html('Dropdown <span class="caret"></span>');
 });
 $(".dropdown").on("show.bs.dropdown", function(){
  $(".btn").html('Dropdown <span class="caret caret-up"></span>');
 });
});
</script>

下拉菜单导航条

以下实例为导航栏中的按钮添加了下拉菜单:

实例

<nav class="navbar navbar-inverse">
 <div class="container-fluid">
  <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
  </div>
  <div>
   <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
     <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="#">Page 1-1</a></li>
      <li><a href="#">Page 1-2</a></li>
      <li><a href="#">Page 1-3</a></li>
     </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
   </ul>
  </div>
 </div>
</nav>

下面的实例在导航栏中添加了一个带有登录表单的下拉菜单:

实例

<ul class="nav navbar-nav navbar-right">
 <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
  <div class="dropdown-menu">
   <form id="formlogin" class="form container-fluid">
    <div class="form-group">
     <label for="usr">Name:</label>
     <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
     <label for="pwd">Password:</label>
     <input type="password" class="form-control" id="pwd">
    </div>
     <button type="button" id="btnLogin" class="btn btn-block">Login</button>
   </form>
   <div class="container-fluid">
    <a class="small" href="#">Forgot password?</a>
   </div>
  </div>
 </li>
</ul>

多级下拉菜单

在本例中，我们使用 jQuery 在单击时打开多级下拉列表:

实例

<script>
$(document).ready(function(){
 $('.dropdown-submenu a.test').on("click", function(e){
  $(this).next('ul').toggle();
  e.stopPropagation();
  e.preventDefault();
 });
});
</script>

在本例中，我们创建了一个用于多级下拉菜单的自定义 .dropdown-submenu 样式类:

实例

/* CSS: */
<style>
.dropdown-submenu {
 position: relative;
}
.dropdown-submenu .dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
 $('.dropdown-submenu a.test').on("click", function(e){
  $(this).next('ul').toggle();
  e.stopPropagation();
  e.preventDefault();
 });
});
</script>