Bootstrap导航条可点击和鼠标悬停显示下拉菜单

走自己的路，让别人说去吗！美好的日子带来快乐，阴暗的日子带来经验，所以别对任何一天怀有遗憾。

使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~

首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个JQuery插件，在dropdown代码段中找到了关键的几句：

 // APPLY TO STANDARD DROPDOWN ELEMENTS
 // ===================================

 $(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 + ', [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();//调用
});
/**
 * 鼠标划过就展开子菜单，免得需要点击才能展开
 */
function dropdownOpen() {

 var $dropdownLi = $('li.dropdown');

 $dropdownLi.mouseover(function() {
 $(this).addClass('open');
 }).mouseout(function() {
 $(this).removeClass('open');
 });
}

小编再为大家分享一个例子：bootstrap实现鼠标悬停自动打开下拉列表框
Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap导航条鼠标悬停下拉菜单</title>
<link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" rel="nofollow noopener noreferrer" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">
<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="span12">
  <h1>Bootstrap导航条鼠标悬停下拉菜单</h1>
  <p>Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。</p>
  <div class="navbar">
   <div class="navbar-inner">
    <ul class="nav">
     <li><a rel="nofollow noopener noreferrer" href="#">Menu1</a></li>
     <li><a rel="nofollow noopener noreferrer" href="#">Menu2</a></li>
     <li class="dropdown"> <a rel="nofollow noopener noreferrer" href="#menu3">Menu3</a>
      <ul class="dropdown-menu">
       <li><a rel="nofollow noopener noreferrer" href="#menu7">Menu7</a></li>
       <li><a rel="nofollow noopener noreferrer" href="#menu8">Menu8</a></li>
      </ul>
     </li>
     <li><a rel="nofollow noopener noreferrer" href="#">Menu4</a></li>
     <li><a rel="nofollow noopener noreferrer" href="#">Menu5</a></li>
     <li><a rel="nofollow noopener noreferrer" href="#">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插件使用好代码教程

以上就是Bootstrap导航条可点击和鼠标悬停显示下拉菜单。整！往死里整！一定要整出个人样来！更多关于Bootstrap导航条可点击和鼠标悬停显示下拉菜单请关注haodaima.com其它相关文章！

全站频道

大家都在搜索：