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中函数声明优先于变量声明的实例分析
Mar 01 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
《长征》教学反思
2014/04/27 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
校长新学期致辞
2015/07/30 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Oracle使用别名的好处
2022/04/19 Oracle
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android