Bootstrap JS Dropdown

JS Dropdown (dropdown.js)

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

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


Dropdown 插件样式

描述实例
.dropdown表示一个下拉菜单试一试
.dropdown-menu创建一个下拉菜单试一试
.dropdown-menu-right右对齐下拉菜单试一试
.dropdown-header给下拉菜单项添加标题试一试
.dropup表示一个向上弹出的菜单试一试
.disabled禁用下拉菜单项试一试
.divider用一条水平线分割下拉菜单项试一试

通过 data-* 属性

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

实例
  1. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>

通过 JavaScript

手动:

实例
  1. $('.dropdown-toggle').dropdown();

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


Dropdown Options

None

Dropdown 方法

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

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

Dropdown 事件

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

事件描述试一试
show.bs.dropdown在即将显示下拉列表时发生。试一试
shown.bs.dropdown完全显示下拉列表时发生(CSS 过渡完成后)试一试
hide.bs.dropdown在即将隐藏下拉列表时发生试一试
hidden.bs.dropdown在下拉列表完全隐藏时发生(CSS 过渡完成后)试一试

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

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

更多实例

改变插入符号图标

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

实例
  1. /* CSS: */
  2. <style>
  3. .caret.caret-up {
  4. border-top-width: 0;
  5. border-bottom: 4px solid #fff;
  6. }
  7. </style>
  8. /* JS: */
  9. <script>
  10. $(document).ready(function(){
  11. $(".dropdown").on("hide.bs.dropdown", function(){
  12. $(".btn").html('Dropdown <span class="caret"></span>');
  13. });
  14. $(".dropdown").on("show.bs.dropdown", function(){
  15. $(".btn").html('Dropdown <span class="caret caret-up"></span>');
  16. });
  17. });
  18. </script>
下拉菜单导航条

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

实例
  1. <nav class="navbar navbar-inverse">
  2. <div class="container-fluid">
  3. <div class="navbar-header">
  4. <a class="navbar-brand" href="#">WebSiteName</a>
  5. </div>
  6. <div>
  7. <ul class="nav navbar-nav">
  8. <li class="active"><a href="#">Home</a></li>
  9. <li class="dropdown">
  10. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
  11. <span class="caret"></span></a>
  12. <ul class="dropdown-menu">
  13. <li><a href="#">Page 1-1</a></li>
  14. <li><a href="#">Page 1-2</a></li>
  15. <li><a href="#">Page 1-3</a></li>
  16. </ul>
  17. </li>
  18. <li><a href="#">Page 2</a></li>
  19. <li><a href="#">Page 3</a></li>
  20. </ul>
  21. </div>
  22. </div>
  23. </nav>

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

实例
  1. <ul class="nav navbar-nav navbar-right">
  2. <li class="dropdown">
  3. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
  4. <div class="dropdown-menu">
  5. <form id="formlogin" class="form container-fluid">
  6. <div class="form-group">
  7. <label for="usr">Name:</label>
  8. <input type="text" class="form-control" id="usr">
  9. </div>
  10. <div class="form-group">
  11. <label for="pwd">Password:</label>
  12. <input type="password" class="form-control" id="pwd">
  13. </div>
  14. <button type="button" id="btnLogin" class="btn btn-block">Login</button>
  15. </form>
  16. <div class="container-fluid">
  17. <a class="small" href="#">Forgot password?</a>
  18. </div>
  19. </div>
  20. </li>
  21. </ul>
多级下拉菜单

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

实例
  1. <script>
  2. $(document).ready(function(){
  3. $('.dropdown-submenu a.test').on("click", function(e){
  4. $(this).next('ul').toggle();
  5. e.stopPropagation();
  6. e.preventDefault();
  7. });
  8. });
  9. </script>

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

实例
  1. /* CSS: */
  2. <style>
  3. .dropdown-submenu {
  4. position: relative;
  5. }
  6. .dropdown-submenu .dropdown-menu {
  7. top: 0;
  8. left: 100%;
  9. margin-top: -1px;
  10. }
  11. </style>
  12. /* JS: */
  13. <script>
  14. $(document).ready(function(){
  15. $('.dropdown-submenu a.test').on("click", function(e){
  16. $(this).next('ul').toggle();
  17. e.stopPropagation();
  18. e.preventDefault();
  19. });
  20. });
  21. </script>