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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 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/04/11 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
在python中用url_for构造URL的方法
2019/07/25 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python绘制高斯曲线
2021/02/19 Python
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
教师实习自我鉴定
2013/12/11 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2019年入党思想汇报
2019/03/25 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
MySQL数据库查询之多表查询总结
2022/08/05 MySQL