脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap导航条

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

 更新时间：2016年11月25日 08:38:57   作者：my98800  
这篇文章主要为大家详细介绍了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" 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 href="#">Menu1</a></li>
     <li><a href="#">Menu2</a></li>
     <li class="dropdown"> <a href="#menu3">Menu3</a>
      <ul class="dropdown-menu">
       <li><a href="#menu7">Menu7</a></li>
       <li><a href="#menu8">Menu8</a></li>
      </ul>
     </li>
     <li><a href="#">Menu4</a></li>
     <li><a href="#">Menu5</a></li>
     <li><a 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插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 微信小程序基于数据库时间实现商品倒计时功能(可重用代码)

    微信小程序基于数据库时间实现商品倒计时功能(可重用代码)

    这篇文章主要介绍了微信小程序基于数据库时间实现商品倒计时功能(可重用代码),代码很完整，拿来就可以使用，现在我把完整的代码分享给大家，需要的朋友可以参考下
    2022-07-07
  • JavaScript中Dom操作实例详解

    JavaScript中Dom操作实例详解

    这篇文章主要介绍了JavaScript中Dom操作,结合实例形式详细分析了javascript针对dom元素节点增删改查相关操作技巧与注意事项,需要的朋友可以参考下
    2019-07-07
  • JS中实现一个下载进度条及播放进度条的代码

    JS中实现一个下载进度条及播放进度条的代码

    这篇文章主要介绍了JS中实现一个下载进度条及播放进度条的代码,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-06-06
  • 微信小程序如何获取用户手机号

    微信小程序如何获取用户手机号

    这篇文章主要为大家详细介绍了微信小程序如何获取用户手机号，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 浅析Javascript中bind()方法的使用与实现

    浅析Javascript中bind()方法的使用与实现

    下面小编就为大家带来一篇浅析Javascript中bind()方法的使用与实现。小编觉得挺
    2016-05-05
  • Js 去掉字符串中的空格(实现代码)

    Js 去掉字符串中的空格(实现代码)

    这篇文章主要介绍了在Js中去掉字符串中空格的实现方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 微信小程序实现自定义拍摄组件

    微信小程序实现自定义拍摄组件

    这篇文章主要为大家详细介绍了微信小程序实现自定义拍摄组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • webpack实现热加载自动刷新的方法

    webpack实现热加载自动刷新的方法

    本文介绍了webpack实现热加载自动刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 15条JavaScript最佳实践小结

    15条JavaScript最佳实践小结

    如果你的JavaScript代码只是增加一些功能，那么尽管大胆地把文件引用放在HTML底部吧，你会看到明显的速度提升。本文总结了15条小建议，感兴趣的朋友可以参考下
    2013-08-08
  • js模糊查询实例分享

    js模糊查询实例分享

    本文主要分享了js模糊查询的实现代码，没有接触到后台数据的知识，只是查询当前表格中每一行所包含的关键字。具有一定的参考价值，需要的朋友一起来看下吧
    2016-12-12

最新评论