Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~
首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个JQuery插件，在dropdown代码段中找到了关键的几句：
//APPLYTOSTANDARDDROPDOWNELEMENTS
//===================================
$(document)
.on('click.bs.dropdown.data-api',clearMenus)
.on('click.bs.dropdown.data-api','.dropdownform',function(e){e.stopPropagation()})
.on('click.bs.dropdown.data-api',toggle,Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api',toggle+',[role=menu]',Dropdown.prototype.keydown)
找到几句关键代码后，想到了解决办法，只要把其中click.bs.dropdown.data-api事件关闭就OK了，代码如下：
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api');
});
以上代码测试有效，导航条可点击问题解决，下面解决鼠标悬停弹下拉菜单问题，这个相对简单些，用JQuery的鼠标事件就可实现，代码如下：
$(document).ready(function(){
dropdownOpen();//调用
});
/**
*鼠标划过就展开子菜单，免得需要点击才能展开
*/
functiondropdownOpen(){
var$dropdownLi=$('li.dropdown');
$dropdownLi.mouseover(function(){
$(this).addClass('open');
}).mouseout(function(){
$(this).removeClass('open');
});
}
小编再为大家分享一个例子：bootstrap实现鼠标悬停自动打开下拉列表框
Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>Bootstrap导航条鼠标悬停下拉菜单</title> <linkid="bootstrap_221"rel="stylesheet"type="text/css"class="library"href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css"> <scriptid="jquery_172"type="text/javascript"class="library"src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script> <scriptid="bootstrap_221"type="text/javascript"class="library"src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script> </head> <body> <divclass="container"> <divclass="span12"> <h1>Bootstrap导航条鼠标悬停下拉菜单</h1> <p>Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。</p> <divclass="navbar"> <divclass="navbar-inner"> <ulclass="nav"> <li><ahref="#">Menu1</a></li> <li><ahref="#">Menu2</a></li> <liclass="dropdown"><ahref="#menu3">Menu3</a> <ulclass="dropdown-menu"> <li><ahref="#menu7">Menu7</a></li> <li><ahref="#menu8">Menu8</a></li> </ul> </li> <li><ahref="#">Menu4</a></li> <li><ahref="#">Menu5</a></li> <li><ahref="#">Menu6</a></li> </ul> </div> </div> </div> </div> </body> </html>
需要添加的CSS样式如下：
.navbar.nav>li.dropdown-menu{
margin:0;
}
.navbar.nav>li:hover.dropdown-menu{
display:block;
}
这样就可以在Bootstrap中实现鼠标悬停的下拉菜单了
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。