Bootstrap是一个非常不错的前端框架,但是在实际的使用过程中还需要根据实际的需要再微调整,比如我们默认使用Bootstrap框架下拉菜单的时候主导航是无法点击打开页面的,以及下拉展开需要单击主菜单,如果我们需要实现主菜单可以点击打开,而且下拉菜单实现悬停下拉的效果则需要进行调整JS脚本。
第一、实现悬停下拉菜单效果
1、修改bootstrap.js
文件
2、添加脚本
$(document).ready(function(){
dropdownOpen();
});
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {<br> $(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}
添加脚本替换后可以实现鼠标悬停菜单下拉效果。
第二、实现主导航可点击打开
$(document).ready(function(){<br> $(document).off('click.bs.dropdown.data-api');
});
添加脚本到
bootstrap.js
文件中,可以实现主导航的可点击打开。 总结,这样我们的Bootstrap菜单导航可以实现鼠标悬停展开,以及主导航的点击打开。