Bootstrap鼠标悬停下拉导航总结

---

---

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鼠标悬停下拉导航总结 ” 的全部内容。