[原创]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 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
JavaScript闭包详解
Feb 02 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
AngularJS表单验证功能分析
May 26 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
三步实现ionic3点击退出app程序
2019/09/17 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python中的推导式使用详解
2015/06/03 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
暑期社会实践心得体会
2014/09/02 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
玄武湖导游词
2015/02/05 职场文书
护士个人年终总结
2015/02/13 职场文书
主持人开场白台词
2015/05/29 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang