- 06/21草莓互联2023年端午节放...
- 06/08宝塔禁止直接用IP访问与防...
- 04/28草莓互联2023年五一劳动...
- 04/23宝塔控制面板BT命令无法使...
- 04/22QQ聊天框中链接无法直接打...
- 04/05草莓互联2023年清明放假...
- 02/23php过滤域名前缀后缀获取...
- 02/27宝塔面板python2.7升级...
- 02/19宝塔面板站点PCI DSS不合...
- 02/19宝塔面板站点站长工具中点亮HT...
- 02/14宝塔面板https协议无法获取...
- 02/11宝塔Windows面板下SQL...
- 02/02宝塔控制面板利用nginx实现...
- 09/18宝塔控制面板FTP增加Flas...
phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...
互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...
电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...
phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...
bootstrap下拉菜单dropdown重复触发/抖动/闪屏解决方法
最近,做了一个外贸独立站,网站导航菜单如下图所示,移到一级菜单上就会显示二级菜单,用到的是jquery的slideDown、slideup。
问题代码如下:
if($(window).width()>768){
//鼠标划过就展开子菜单
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).slideDown();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).slideUp();
});
}
在客户使用过程中发现,当我在两个一级菜单见快速移动,在第一个菜单的二级菜单消失前,快速移至二级菜单,二级菜单就会在2个一级菜单的二级菜单中快速切换,就会出现重复触发、抖动、闪屏的感觉。
我的解决方法就是使用stop函数,stop函数的用法如下所示:
stop([clearQueue],[jumpToEnd]); clearQueue:如果设置成true,则清空队列,可以立即结束动画。 jumpToEnd:如果设置成true,则完成队列,可以立即完成动画。可选,默认是false。
我把代码改成如下形式:
if($(window).width()>768){
//鼠标划过就展开子菜单
$('ul.nav li.dropdown').hover(function() {
$(this).find(".dropdown-menu").stop(true, false).slideDown();
//$(this).find('.dropdown-menu').stop(true, true).slideDown();
}, function() {
$(this).find(".dropdown-menu").stop(true, false).slideUp();
//$(this).find('.dropdown-menu').stop(true, true).slideUp();
});
}
这样,就解决了slidedown/slideup重复触发/抖动/闪屏的问题了。