手记

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

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的语义话标签控件不兼容的问题。

0人推荐
随时随地看视频
慕课网APP