菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS 下拉菜单


JS 下拉菜单 (dropdown.js)

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

有关下拉菜单的教程,请阅读我们的 Bootstrap 下拉菜单教程


下拉菜单插件类

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

通过 data-* 属性

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

示例

<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单示例</a>
自己动手试一试 »

通过 JavaScript

使用以下命令手动启用:

示例

$('.dropdown-toggle').dropdown();
自己动手试一试 »

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



下拉菜单选项

下拉菜单方法

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

方法 描述 试一试
.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(); // 获取元素的文本
  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="#">网站名称</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>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持