Bootstrap 下拉菜单（Dropdown）插件

Bootstrap下拉菜单（Dropdown）插件Bootstrap下拉菜单这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用dropdown.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法您可以切换下拉菜单（Dropdown）插件的隐藏内容：通过data属性：向链接或按钮添加data-toggle="dropdown"来切换下拉菜单，如下所示：<divclass="dropdown"><adata-toggle="dropdown"href="#">下拉菜单（Dropdown）触发器</a><ulclass="dropdown-menu"role="menu"aria-labelledby="dLabel">...</ul></div>如果您需要保持链接完整（在浏览器不启用JavaScript时有用），请使用data-target属性代替href="#"：<divclass="dropdown"><aid="dLabel"role="button"data-toggle="dropdown"data-target="#"href="/page.html">下拉菜单（Dropdown）<spanclass="caret"></span></a><ulclass="dropdown-menu"role="menu"aria-labelledby="dLabel">...</ul></div>通过JavaScript：通过JavaScript调用下拉菜单切换，请使用下面的方法：$('.dropdown-toggle').dropdown()实例在导航栏内下面的实例演示了在导航栏内的下拉菜单的用法：实例<navclass="navbarnavbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#">k88.net</a></div><div><ulclass="navnavbar-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="#">JasperReport</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="navnav-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="navbarnavbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#">k88.net</a></div><divid="myexample"><ulclass="navnavbar-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="#">JasperReport</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>尝试一下?结果如下所示：