小米下拉框jQuery实现

<div class="daohanglan">
    <div class="dh">小米手机 <--多个自己定义-->
        <div class="dhbottom">
　　　　 </div>
　　 </div>
</div>
<--要给最外面的div设置padding值为了区分开从外部移入和横向移动-->

$(document).ready(function(){
    let tag=0;
    $(".daohanglan").mouseenter(function(){  <!--.daohanglan为导航栏所在的块，.dh为显示的导航标题，.dhbottom为移入所要显示出来的列表-->

        tag=3;
        console.log("daohanglan移入");
    });
     $('.dh').hover(function(){
            $(this).mouseenter(function(){
                tag=1;
                console.log("dh移入");
            });
            if(tag===1)
                {

                    $(this).children('.dhbottom').css({height:230}).css({display:"block"}).show();

                }
                if(tag===3){
                    $(this).children('.dhbottom').animate({height:230},500).show();

                }
      },function(){
            $(this).children('.dhbottom').animate({height: 0}, 500).hide();

    });

});

巴特西

小米下拉框jQuery实现

最新文章

热门文章