使用Dropdown插件,您可以向任何组件添加下拉菜单,如导航栏,标签,药片和按钮.
如果您想单独包含此插件功能,那么您将需要 dropdown.js 的.另外,如 Bootstrap插件概述一章所述,您可以包含 bootstrap.js 或缩小 bootstrap.min.js .
您可以切换下拉插件的隐藏内容 :
通过数据属性 : 将 data-toggle ="下拉列表"添加到链接或按钮以切换下拉列表,如下所示 :
<div class = "dropdown"> <a data-toggle = "dropdown" href = "#">Dropdown trigger</a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... </ul> </div>
如果您需要保持链接不变(如果浏览器未启用,这将非常有用) JavaScript),使用数据目标属性而不是 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()
在Navbar中
以下示例演示了导航栏中下拉菜单的使用情况 :
<nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a class = "navbar-brand" href = "#">TutorialsPoint</a> </div> <div> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">iOS</a></li> <li><a href = "#">SVN</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class="caret"></b> </a> <ul class = "dropdown-menu"> <li><a href = "#">jmeter</a></li> <li><a href = "#">EJB</a></li> <li><a href = "#">Jasper Report</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> </ul> </div> </nav>
在标签内
以下示例演示了标签内的下拉菜单的使用和减号;
<p>Tabs With Dropdown Example</p> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li class = "dropdown"> <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java <span class = "caret"></span> </a> <ul class = "dropdown-menu"> <li><a href = "#">Swing</a></li> <li><a href = "#">jMeter</a></li> <li><a href = "#">EJB</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </li> <li><a href = "#">PHP</a></li> </ul>
没有选项.
下拉切换有一个显示或隐藏下拉列表的简单方法.
$().dropdown('toggle')
以下示例演示了dropdown插件方法的用法.
<nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a class = "navbar-brand" href = "#">TutorialsPoint</a> </div> <div id = "myexample"> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">iOS</a></li> <li><a href = "#">SVN</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a> <ul class = "dropdown-menu"> <li><a id = "action-1" href = "#">jmeter</a></li> <li><a href = "#">EJB</a></li> <li><a href = "#">Jasper Report</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> </ul> </div> </nav> <script> $(function(){ $(".dropdown-toggle").dropdown('toggle'); }); </script>