官网实例:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
//相关属性和api: data-*; aria-*,role(二者和盲人阅读器相关,普通开发可以忽略) ;
open(使隐藏内容直接显示) dropdown-menu-right(让下拉菜单靠右,当父元素足够长的时候,"btn-block"使其变长) dropdown-header divider
dropup(使隐藏的内容向上显示) text-center(内容居中)
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header">第一部分</li> //第一部分的li和其他li并列 <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> //分割线 <li class="dropdown-header">第二部分</li> //第二部分li和其他li并列 <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div>
思考: 如何让隐藏部分hover显示? -------------------------------jquery控制
<style> .my-btnStyle button{ width: 100px; height: 50px; border: none; background-color: #f6f8f8; } .my-btnStyle .dropdown-menu img{ margin: 5px; } .my-btnStyle .dropdown-menu{ animation: 0.3s linear fadeIn; } @keyframes fadeIn{ 0%{opacity: 0;transform: translateY(-20px);} 100%{opacity: 1;transform: translateY(0)} } </style> <body> <div class="dropdown my-btnStyle"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header"><img width="16" height="16" class="m-r-sm" alt="HTML Website Templates" src="https://www.codester.com/static/uploads/categories/8/icon-alt.png">第一部分</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header"><img width="16" height="16" class="m-r-sm" alt="HTML Website Templates" src="https://www.codester.com/static/uploads/categories/8/icon-alt.png">第二部分</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div> </body> <script> $(function(){ var timer=null; if(window.navigator.userAgent.toLowerCase().indexOf('mobile')==-1){ $(".dropdown-toggle").hover(function(){ clearTimeout(timer); $(".dropdown").addClass('open'); },function(){ timer=setTimeout(function(){ $(".dropdown").removeClass('open'); },100) }) $(".dropdown-menu").hover(function(){ clearTimeout(timer); },function(){ timer=setTimeout(function(){ $(".dropdown").removeClass('open'); },100) }) } }) </script>
bootstrap框架下,通过jquery利用鼠标hover控制内容显示和隐藏,同时点击显示和隐藏也生效!
关于其他的API:
$('.dropdown-toggle').dropdown();(除去data-toggle="dropdown)
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown').on('show.bs.dropdown',function(){alert('a')});
$('.dropdown').on('shown.bs.dropdown',function(){alert('a')});
$('.dropdown').on('hide.bs.dropdown',function(){alert('a')});
$('.dropdown').on('hiden.bs.dropdown',function(){alert('a')});