- 09/30草莓互联2024年国庆假期...
- 09/15草莓互联2024年中秋节放...
- 08/10宝塔控制面板手动安装Ope...
- 06/07草莓互联2024年端午节放...
- 04/30草莓互联2024年五一劳动...
- 04/03草莓互联2024年清明放假...
- 03/24宝塔控制面板Nginx后端...
- 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重复触发/抖动/闪屏的问题了。