Bootstrap鼠标悬停下拉导航总结

转载于：https://blog.csdn.net/qq_35393869/article/details/81939088

Bootstrap鼠标悬停下拉导航总结
以bootstrap.js未压缩版本V3.3.7为例。
Bootstrap的导航条为适应移动设备，都是click弹出二级下拉菜单，没有鼠标hover的特效；
所以为了实现鼠标hover弹出下拉菜单，提升网站用户体验和满足一般网站特效需求，将直接改动bootstrap的源码。

文章导航

Bootstrap鼠标悬停下拉导航总结
方案一 · 源码修改
添加css代码
方案二 · 不改动源码
附件：压缩版本 de 源码修改
方案一 · 源码修改
找到下图，第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)
1
2
3
4
5
6
7
意思是：关闭该鼠标点击事件！
鼠标滑过的效果就可以通过写CSS，来直接实现。

之后，在页面添加如下css代码，即可:

添加css代码

1
2
3
4
5
方案二 · 不改动源码
也可以在自己的页面中覆盖原来的js

$(document).ready(function(){
    $(document).off('click.bs.dropdown.data-api');
});
1
2
3
之后，添加上述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)
1
将图中箭头所指，红色矩形框中的on替换为off，之后添加上文中的CSS代码即可。