继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

解决jquery的hover()方法连续触发导致的bug

叫我威哥哥
关注TA
已关注
手记 9
粉丝 5
获赞 11

HTML结构:

<li class="layui-nav-item ruijie-nav-item">

            <div class="title">SMB产品报价体系<i class="layui-icon layui-icon-down"></i> </div>

            <ul class="ruijie-nav-child" style="position: absolute;">

            <li><a href="#1">移动模块</a></li>

            <li><a href="#2" >SMB产品报价体系</a></li>

            <li><a href="#3">电商平台</a></li>

            </ul>

  </li>

jquery代码:

$(function(){

$(".layui-layout-body .ruijie-nav-item").hover(function (){

var self = this;

timer = setTimeout(function(){

$(self).children('.ruijie-nav-child').stop().show(500); 

},300);

$(".layui-layout-body .ruijie-nav-item .title i").removeClass("layui-icon-down").addClass("layui-icon-up");

    },function (){

    var self = this;

    remove = setTimeout(function(){

    $(self).children('.ruijie-nav-child').stop(false,true).hide(500);

    },300);

    $(".layui-layout-body .ruijie-nav-item .title i").removeClass("layui-icon-up").addClass("layui-icon-down");

    });  

})

这段代码主要是为了解决低版本ie低版本浏览器不能识别layui的语义话标签控件不兼容的问题。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP