Bootstrap JS 下拉菜单参考

JS 下拉菜单 (dropdown.js)

下拉菜单是一种可切换菜单,允许用户从预定义列表中选择一个值。

有关 Dropdowns 的教程,请阅读我们的 Bootstrap Dropdowns 教程


下拉插件类

描述 实例
.dropdown 表示下拉菜单 测试一下
.dropdown-menu 构建下拉菜单 测试一下
.dropdown-menu-right 右对齐下拉菜单 测试一下
.dropdown-header 在下拉菜单中添加标题 测试一下
.dropup 表示下拉菜单 测试一下
.disabled 禁用下拉菜单中的项目 测试一下
.divider 用水平线分隔下拉菜单中的项目 测试一下

通过 data-* 属性

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

实例

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>
亲自试一试 »

通过 JavaScript

手动启用:

实例

$('.dropdown-toggle').dropdown();
亲自试一试 »

注释: 无论您是否调用 dropdown() 方法,都需要 data-toggle="dropdown" 属性。



Dropdown 下拉选项

None

Dropdown 下拉方法

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

方法 描述 试一试
.dropdown("toggle") 切换下拉菜单 测试一下

Dropdown 下拉事件

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

事件 描述 试一试
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);
});
亲自试一试 »

更多实例

将插入符号图标更改为倒置

以下示例在单击下拉菜单时将插入符号图标从指向向下更改为向上:

实例

/* 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>
亲自试一试 »