实现Bootstrap导航鼠标悬停下拉菜单及下拉主菜单可点击效果

Bootstrap是一个非常不错的前端框架，但是在实际的使用过程中还需要根据实际的需要再微调整，比如我们默认使用Bootstrap框架下拉菜单的时候主导航是无法点击打开页面的，以及下拉展开需要单击主菜单，如果我们需要实现主菜单可以点击打开，而且下拉菜单实现悬停下拉的效果则需要进行调整JS脚本。

第一、实现悬停下拉菜单效果

1、修改bootstrap.js文件

2、添加脚本

$(document).ready(function(){ dropdownOpen(); }); function dropdownOpen() { var $dropdownLi = $('li.dropdown'); $dropdownLi.mouseover(function() { $(this).addClass('open'); }).mouseout(function() { $(this).removeClass('open'); }); }

添加脚本替换后可以实现鼠标悬停菜单下拉效果。

第二、实现主导航可点击打开

$(document).ready(function(){ $(document).off('click.bs.dropdown.data-api'); });

添加脚本到bootstrap.js文件中，可以实现主导航的可点击打开。

总结，这样我们的Bootstrap菜单导航可以实现鼠标悬停展开，以及主导航的点击打开。

本文出处：老蒋部落 » 实现Bootstrap导航鼠标悬停下拉菜单及下拉主菜单可点击效果 | 欢迎分享