Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
最近公司做网页用到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鼠标悬停的问题,推荐大家使用。
JS跨域解决方案之使用CORS实现跨域
引言跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略,即JavaScript或Cookie只能访问同域下
js贪吃蛇游戏实现思路和源码
本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title贪吃蛇小游戏/titlestyle*{margin:0;paddin
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有
编辑:广州明生医药有限公司
标签:菜单,鼠标,样式,贪吃蛇,网页