Bootstrap鼠标悬停展开子菜单

这个是自己这两天弄一个客户网站时候碰到了一个问题，先前没用过Bootstrap的JS文件，折腾了好一会儿，虽然不是100%完美，也算解决了问题；在这里把问题处理办法记录一下，方便日后再次碰到问题后的处理；

方案一 · Bootstrap.js源码修改

如果是未压缩过的Bootstrap.js，则在约第908~913行左右可以找到以下代码：

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('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)

如果是被压缩过的Bootstrap.js文件，则直接搜索：

on('click.bs.dropdown.data-api

找到JS里面的以上代码，一起三处，将其中的【on】改为【off】，改后如下：

  $(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)

之后在当前菜单所属页面增加以下样式：

<style>
	.navbar .nav > li:hover .dropdown-menu {
		display: block;
	}
</style>

优点：由原来的点击打开子菜单，切换为悬停；

缺点：无法点击子菜单，当鼠标移开主菜单后，子菜单消失；

方案二 · Bootstrap.js源码修改

如果是被压缩过的Bootstrap.js文件，则直接搜索：

click.bs.dropdown

将其中的【click】改为【mouseover】

也可快速实现鼠标悬停出现子菜单的效果；

优点：由原来的点击打开子菜单，切换为悬停；

缺点：无法点击子菜单，当鼠标移开主菜单后，子菜单消失；

方案三· Bootstrap.js源码修改

Bootstrap中的导航条默认鼠标点击才会显示子菜单，可以通过如下脚本修改默认行为，使得鼠标悬停展开子菜单。

 <script>
  $(function(){
    //鼠标移入和移出，显示或隐藏子菜单
    $("li.dropdown").mouseover(function () {
      $(this).children(".dropdown-menu").show();
    }).mouseout(function () {
      $(this).children(".dropdown-menu").hide();
    });
    //点击子菜单项的时候隐藏子菜单
    $(".dropdown-item").click(function () {
        $(this).parent(".dropdown-menu").hide();
    });
  });
</script>

直接将以上代码放到目标页面的body区域即可；

优点：由原来的点击打开子菜单，切换为悬停，且可以子菜单正常点击的同时，主菜单亦能正常点击；

缺点：当鼠标移开主菜单后，子菜单未消失