小米下拉框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();

});

});

posted @ 2019-08-27 19:20  King~~~  阅读(408)  评论(0编辑  收藏  举报