最新的Web开发教程
 

Bootstrap JS下拉


JS Dropdown (dropdown.js)

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

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


下拉插件类

描述
.dropdown 表示一个下拉菜单 尝试一下
.dropdown-menu 构建下拉菜单 尝试一下
.dropdown-menu-right 右对齐一个下拉菜单 尝试一下
.dropdown-header 添加下拉菜单里面的标题 尝试一下
.dropup 指示dropup菜单 尝试一下
.disabled 在下拉菜单中禁用项目 尝试一下
.divider 符用一个水平线上的下拉菜单里面的物品 尝试一下

通过data-*属性

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

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

通过JavaScript

与手动启用:

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

注: data-toggle="dropdown"属性不管你是否调用所需的dropdown()方法。


下拉选项

None

下拉方法

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

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

下拉活动

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

事件 描述 尝试一下
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(); // 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>
试一试»