首页 > 代码库 > Bootstrap学习js插件篇之下拉菜单

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

2024-07-26 01:24:25   218人阅读

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

 

用于导航条

 

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

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  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=http://www.mamicode.com/"#">Brand</a>  
  10.  </div>  
  11.   
  12.  <div class="collapse navbar-collapse" id="myCollapse">  
  13.    <ul class="nav navbar-nav">  
  14.      <li class="active"><a href=http://www.mamicode.com/"#">Link</a></li>  
  15.      <li><a href=http://www.mamicode.com/"#">Link</a></li>  
  16.      <li class="dropdown">  
  17.        <a href=http://www.mamicode.com/"#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>  
  18.        <ul class="dropdown-menu">  
  19.          <li><a href=http://www.mamicode.com/"#">Action</a></li>  
  20.          <li><a href=http://www.mamicode.com/"#">Another action</a></li>  
  21.          <li><a href=http://www.mamicode.com/"#">Something else here</a></li>  
  22.          <li class="divider"></li>  
  23.          <li><a href=http://www.mamicode.com/"#">Separated link</a></li>  
  24.          <li class="divider"></li>  
  25.          <li><a href=http://www.mamicode.com/"#">One more separated link</a></li>  
  26.        </ul>  
  27.      </li>  
  28.    </ul>  
  29.    <form class="navbar-form navbar-left" role="search">  
  30.      <div class="form-group">  
  31.        <input type="text" class="form-control" placeholder="Search">  
  32.      </div>  
  33.      <button type="submit" class="btn btn-default">Submit</button>  
  34.    </form>  
  35.    <ul class="nav navbar-nav navbar-right">  
  36.      <li><a href=http://www.mamicode.com/"#">Link</a></li>  
  37.      <li class="dropdown">  
  38.        <a href=http://www.mamicode.com/"#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>  
  39.        <ul class="dropdown-menu">  
  40.          <li><a href=http://www.mamicode.com/"#">Action</a></li>  
  41.          <li><a href=http://www.mamicode.com/"#">Another action</a></li>  
  42.          <li><a href=http://www.mamicode.com/"#">Something else here</a></li>  
  43.          <li class="divider"></li>  
  44.          <li><a href=http://www.mamicode.com/"#">Separated link</a></li>  
  45.        </ul>  
  46.      </li>  
  47.    </ul>  
  48.  </div>  
  49. lt;/nav>  

效果就是

 

 

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

复制代码
      <li class="dropdown">        <a href="http://www.mamicode.com/#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>        <ul class="dropdown-menu">          <li><a href="http://www.mamicode.com/#">Action</a></li>          <li><a href="http://www.mamicode.com/#">Another action</a></li>          <li><a href="http://www.mamicode.com/#">Something else here</a></li>          <li class="divider"></li>          <li><a href="http://www.mamicode.com/#">Separated link</a></li>          <li class="divider"></li>          <li><a href="http://www.mamicode.com/#">One more separated link</a></li>        </ul>      </li>

 

用法二--通过JavaScript

 

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

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

 

<script type="text/javascript">     function Test()    {        $(‘#myDropDown‘).dropdown();        } </script>

 

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

 

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

$(‘#myDropdown‘).on(‘show.bs.dropdown‘, function () {  // 在显示的时候做一些处理代码})

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


联系
我们