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