Bootstrap学习js插件篇之下拉菜单

时间：2022-09-09 21:26:50

案例

通过此插件可以为几乎所有东西添加下拉菜单，包括导航条、标签页、胶囊式按钮。

用于导航条

导航条分为四个部分。第一部分导航头，第二部分导航列，第三部分form查询表单，第四部分导航列。

  1. <nav class="navbar navbar-default" role="navigation">
  2. <div class="navbar-header">
  3. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
  4. <span class="sr-only">Toggle navigation</span>
  5. <span class="icon-bar"></span>
  6. <span class="icon-bar"></span>
  7. <span class="icon-bar"></span>
  8. </button>
  9. <a class="navbar-brand" href="#">Brand</a>
  10. </div>
  11. <div class="collapse navbar-collapse" id="myCollapse">
  12. <ul class="nav navbar-nav">
  13. <li class="active"><a href="#">Link</a></li>
  14. <li><a href="#">Link</a></li>
  15. <li class="dropdown">
  16. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  17. <ul class="dropdown-menu">
  18. <li><a href="#">Action</a></li>
  19. <li><a href="#">Another action</a></li>
  20. <li><a href="#">Something else here</a></li>
  21. <li class="divider"></li>
  22. <li><a href="#">Separated link</a></li>
  23. <li class="divider"></li>
  24. <li><a href="#">One more separated link</a></li>
  25. </ul>
  26. </li>
  27. </ul>
  28. <form class="navbar-form navbar-left" role="search">
  29. <div class="form-group">
  30. <input type="text" class="form-control" placeholder="Search">
  31. </div>
  32. <button type="submit" class="btn btn-default">Submit</button>
  33. </form>
  34. <ul class="nav navbar-nav navbar-right">
  35. <li><a href="#">Link</a></li>
  36. <li class="dropdown">
  37. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  38. <ul class="dropdown-menu">
  39. <li><a href="#">Action</a></li>
  40. <li><a href="#">Another action</a></li>
  41. <li><a href="#">Something else here</a></li>
  42. <li class="divider"></li>
  43. <li><a href="#">Separated link</a></li>
  44. </ul>
  45. </li>
  46. </ul>
  47. </div>
  48. lt;/nav>

效果就是Bootstrap学习js插件篇之下拉菜单

用法一--通过data属性

通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。

Bootstrap学习js插件篇之下拉菜单
      <li class="dropdown">

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

        <ul class="dropdown-menu">

          <li><a href="#">Action</a></li>

          <li><a href="#">Another action</a></li>

          <li><a href="#">Something else here</a></li>

          <li class="divider"></li>

          <li><a href="#">Separated link</a></li>

          <li class="divider"></li>

          <li><a href="#">One more separated link</a></li>

        </ul>

      </li>

用法二--通过JavaScript

通过JavaScript打开或关闭下拉菜单：

删除data-toggle属性，那么再次点击就不会出现下来菜单了，接下来我们通过给这个a标签添加一个onclick事件。

<script type="text/javascript">

     function Test()

    {

        $('#myDropDown').dropdown();

        }

 </script>

然后点击a标签就可以出现下拉菜单了。

Bootstrap学习js插件篇之下拉菜单

可以绑定事件，然后在元素进行相应处理的时候会自动绑定到元素，并进行执行相关的代码。

$('#myDropdown').on('show.bs.dropdown', function () {

  // 在显示的时候做一些处理代码

})

相关文章