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


Posted in Javascript onNovember 25, 2016

使用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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
广告切换效果(缓动切换)
May 27 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
javaScript语法总结
Nov 25 #Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 #Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 #Javascript
javascript简单进制转换实现方法
Nov 24 #Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 #Javascript
详解Node.js:events事件模块
Nov 24 #Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 #Javascript
You might like
thinkphp常见路径用法分析
2014/12/02 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
php之可变变量的实例详解
2017/09/12 PHP
jQuery参数列表集合
2011/04/06 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
Python异常的检测和处理方法
2018/10/26 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
质量承诺书格式
2014/05/20 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
人事任命书范本
2015/09/21 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
netty 实现tomcat的示例代码
2022/06/05 Servers