Bootstrap dropdown 使用
同样是2种方式
参考http://www.bootcss.com/javascript.html#dropdowns
JS方式调用 http://www.w3resource.com/twitter-bootstrap/dropdown.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link href="../css/bootstrap.css" rel="stylesheet"> <style type="text/css"> </style> <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="../js/bootstrap.js" type="text/javascript"></script> </head> <body> <div class="dropdown"> <!-- 加上data-toggle就使href的链接失效 --> <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="page.html"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> <div style="margin:50px"></div> 导航条中的下拉菜单 <div id="navbar" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a><!-- 位于左侧的站标 --> <ul class="nav" role="navigation"> <!-- ul是导航中的菜单集合 --> <li class="dropdown"> <!-- 一个栏目的开始 --> <a id="drop1" href="page.html" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><!-- 改栏目的链接 增加data-toggle="dropdown" 属性就是下拉菜单 --> <!-- class="caret" 是表示下拉菜单的倒三角--> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="http://google.com">Action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> <li class="dropdown"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Another action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> </ul> <ul class="nav pull-right"> <li> <a href="rich.html" id="X" role="button" class="" >Menu1</a> </li> <li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Another action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> </ul> </div> </div> </div> <button id="btn1" class="btn" > toogle </button> <p></p> <p></p> <p></p> <p></p> 标签页中的下拉菜单 <div id="tab" class="bs-docs-example"> <ul class="nav nav-pills"> <!-- active 表示默认选中 --> <li class="active"> <a href="#">Regular link</a> </li> <li class="dropdown"> <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Another action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Another action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5" style="margin-top:-5px;"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Another action</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> </ul> <!-- /tabs --> </div> JS方式 <div id="byJS" class="bs-docs-example"> <ul class="nav nav-pills"> <!-- active 表示默认选中 --> <li class="active"> <a href="#">Regular link</a> </li> <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li class="divider"></li> <li><a href="#">JavaScript</a></li> <li><a href="#">HTML5</a></li> </ul> </li> </ul> <!-- /tabs --> </div> <script type="text/javascript"> $(function() { $('#btn1').click(function() { $('#byJS .dropdown-toggle').dropdown(); }); $("#navbar .dropdown").hover( function(){ $(this).addClass("open"); }, function(){ $(this).removeClass("open"); } ); $("#tab .dropdown").hover( function(){ $(this).find('.dropdown-menu').show('fast'); }, function(){ $(this).find('.dropdown-menu').hide('fast'); } ); }); </script> </body> </html>
