bootstrap下拉菜单鼠标悬停弹出
本课程视频是VIP会员课程，学习请进入VIP学习区。
bootstrap下拉菜单默认情况是鼠标点击后出现下拉菜单，对于我们实际做网站时，需要把它改成鼠标悬停弹出下拉菜单。
bootstrap下拉菜单鼠标悬停弹出改造步骤
- 将自己网站引入bootstrap框架；
- 在网页的底部，加上以下的JS代码。
<script>/*下拉菜单*/
$(document).ready(function(){
dropdownOpen();
});
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}</script> - 其中li,dropdown 是官网给的事例中的li标签的 class属性。通过以上的代码，我们就可以变成鼠标悬停弹出bootstrap下拉菜单了。
补充：除了上面的代码之外，我们还可以使用下面的JS代码，还可以实现缓冲下拉的效果。
$(document).ready(function(){
if($(window).width()>768){
//鼠标划过就展开子菜单
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).slideDown();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).slideUp();
});
}
});
