Bootstrap 下拉菜单(Dropdown)插件


Bootstrap 下拉菜单(Dropdown)插件

Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本次章节将具体详细详细讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。

如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js

用法

您可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • 通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:

    <div class="dropdown"><a data-toggle="dropdown"href="#">下拉菜单(Dropdown)触发器</a>
  • <ul class="dropdown-menu"role="menu"aria-labelledby="dLabel">    ...  </ul></div>

    如果您需要保持链接完整(在浏览器不启用 JavaScript 时有用),请使用 data-target 属性代替 href="#"

    <div class="dropdown"><a id="dLabel"role="button"data-toggle="dropdown"data-target="#"href="/page.html">    
  • 下拉菜单(Dropdown) <span class="caret"></span></a><ul class="dropdown-menu"role="menu"aria-labelledby="dLabel">    
  • ...  </ul></div>


  • 通过 JavaScript:通过 JavaScript 调用下拉菜单切换,请使用下面的方法:

    $('.dropdown-toggle').dropdown()


实例

在导航栏内

下面的实例演示了在导航栏内的下拉菜单的用法:

实例

<navclass="navbar navbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#">小白教程</a></div><div><ulclass="nav navbar-nav"><liclass="active"><ahref="#">iOS</a></li><li><ahref="#">SVN</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">                    Java                     <bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">jmeter</a></li><li><ahref="#">EJB</a></li><li><ahref="#">Jasper Report</a></li><liclass="divider"></li><li><ahref="#">分离的链接</a></li><liclass="divider"></li><li><ahref="#">另一个分离的链接</a></li></ul></li></ul></div></div></nav>

演示一下 ?

结果如下所示:


在标签页内

下面的实例演示了在标签页内的下拉菜单的用法:

实例

<p>带有下拉菜单的标签页</p><ulclass="nav nav-tabs"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">SVN</a></li><li><ahref="#">iOS</a></li><li><ahref="#">VB.Net</a></li><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#">Java            <spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">Swing</a></li><li><ahref="#">jMeter</a></li><li><ahref="#">EJB</a></li><liclass="divider"></li><li><ahref="#">分离的链接</a></li></ul></li><li><ahref="#">PHP</a></li></ul>

演示一下 ?

结果如下所示:

带有下拉菜单的标签页

选项

没有选项。

方法

下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

$().dropdown('toggle')

实例

下面的实例演示了下拉菜单(Dropdown)插件方法的用法:

实例

<navclass="navbar navbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#">小白教程</a></div><divid="myexample"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">iOS</a></li><li><ahref="#">SVN</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Java                    <bclass="caret"></b></a><ulclass="dropdown-menu"><li><aid="action-1"href="#">jmeter</a></li><li><ahref="#">EJB</a></li><li><ahref="#">Jasper Report</a></li><liclass="divider"></li><li><ahref="#">分离的链接</a></li><liclass="divider"></li><li><ahref="#">另一个分离的链接</a></li></ul></li></ul></div></div></nav></div><script>$(function() {    $(".dropdown-toggle").dropdown('toggle');});</script>

演示一下 ?

结果如下所示:



Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16