Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码


Posted in Javascript onJune 23, 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导航条可点击和鼠标悬停显示下拉菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 #Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 #Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 #Javascript
JavaScript自学笔记(必看篇)
Jun 23 #Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 #Javascript
JS使用JSON作为参数实例分析
Jun 23 #Javascript
浅析Bootstrap表格的使用
Jun 23 #Javascript
You might like
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php的字符串用法小结
2010/06/08 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python实现批量下载文件
2015/05/17 Python
Python中的默认参数详解
2015/06/24 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python字典操作实例详解
2017/11/16 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python实现图像识别功能
2018/01/29 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
如何使用Python调整图像大小
2020/09/26 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
python 写一个文件分发小程序
2020/12/05 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
会议活动邀请函
2014/01/27 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
诚信承诺书模板
2014/05/26 职场文书
受伤赔偿协议书
2014/09/24 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python