[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示


Posted in Javascript onApril 14, 2016

最近公司做网页用到Bootstrap的菜单功能,要实现鼠标悬停显示二级菜单,于是就研究了一下,大概有两种方法。

第一种方法:修改样式表

实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css:

.nav > li:hover .dropdown-menu {display: block;}

这句css加在bootstrap.min.css之后出现的css中,你试下!

缺点:
1.相应的顶级菜单不可点击
2.鼠标滑到二级菜单后,顶级菜单没有样式

第二种方法:利用JQuery的特性来实现

结合了网上的教程,利用JQuery中的两个事件就可以解决问题,具体css:

//关闭click.bs.dropdown.data-api事件,使顶级菜单可点击

$(document).off('click.bs.dropdown.data-api');

//自动展开

$('.nav .dropdown').mouseenter(function(){

 $(this).addClass('open');

});

//自动关闭

$('.nav .dropdown').mouseleave(function(){

 $(this).removeClass('open');

});

这种方法不仅顶级菜单可以点击,而且样式也不会丢,而且能解决Bootstrap鼠标悬停的问题,推荐大家使用。

Javascript 相关文章推荐
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 #Javascript
原生js编写autoComplete插件
Apr 13 #Javascript
JS中的eval 为什么加括号
Apr 13 #Javascript
jQuery操作属性和样式详解
Apr 13 #Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 #Javascript
两种方法解决javascript url post 特殊字符转义 + & #
Apr 13 #Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 #Javascript
You might like
咖啡与牛奶
2021/03/03 冲泡冲煮
php获取某个目录大小的代码
2008/09/10 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
开办饭店创业计划书
2013/12/28 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
销售工作决心书
2015/02/04 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js