版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35393869/article/details/81939088
Bootstrap鼠标悬停下拉导航总结
以bootstrap.js未压缩版本V3.3.7
为例。
Bootstrap的导航条为适应移动设备,都是click弹出二级下拉菜单,没有鼠标hover的特效;
所以为了实现鼠标hover弹出下拉菜单,提升网站用户体验和满足一般网站特效需求,将直接改动bootstrap的源码。
文章导航
方案一 · 源码修改
找到下图,第908~913行
:
修改为:
$(document)
.off('click.bs.dropdown.data-api', clearMenus)
.off('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.off('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
意思是:关闭该鼠标点击事件!
鼠标滑过的效果就可以通过写CSS,来直接实现。
之后,在页面添加如下css代码,即可:
添加css代码
<style>
.navbar .nav > li:hover .dropdown-menu {
display: block;
}
</style>
方案二 · 不改动源码
也可以在自己的页面中覆盖原来的js
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api');
});
之后,添加上述CSS代码 !
附件:压缩版本 de 源码修改
Ctrl+F
全局查找目标:click.bs.dropdown.data-api
找到图片中的代码片段
a.fn.dropdown.noConflict=function(){return a.fn.dropdown=h,this},a(document).on("click.bs.dropdown.data-api",c).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",f,g.prototype.toggle).on("keydown.bs.dropdown.data-api",f,g.prototype.keydown).on("keydown.bs.dropdown.data-api",".dropdown-menu",g.prototype.keydown)}(jQuery)
将图中箭头所指,红色矩形框中的on
替换为off
,之后添加上文中的CSS代码即可
。
以上就是“ Bootstrap鼠标悬停下拉导航总结 ” 的全部内容。