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表单验证代码
Aug 02 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
js实现汉字排序的方法
Jul 23 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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递归算法的详细示例分析
2013/02/19 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
实例讲解React 组件
2020/07/07 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
2014年大学生自我评价
2014/01/19 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
图书馆标语
2014/06/19 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android