概述
Bootstrap提供的下拉菜单,是鼠标点击后出现,用户体验不太好。自改为鼠标悬停显示方式。修改两处即可,简述如下。
修改
- css增加鼠标悬停(即:hover)显示属性;
.nav > li:hover .dropdown-menu{
display: block;
}
- js关闭鼠标点击功能(若不关闭,会出现点击后移出鼠标,下拉菜单不隐藏Bug.)
<script>
$(document).off( 'click.bs.dropdown.data-api' );
</script>
备注
自己的代码不贴了。附上Bootstrap二级下拉菜单的代码,使用时添加修改的两处即可。
<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 rel="nofollow" href="#">Action</a></li>
<li><a rel="nofollow" href="#">Another action</a></li>
<li><a rel="nofollow" href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a rel="nofollow" href="#">Separated link</a></li>
</ul>
</div>