<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test slide</title>
<style>
body{
font-family:"Times New Roman","sans-serif";
}
.nav{
text-align: center;
width:300px;
height:40px;
}
.nav ul li{
width:20%;
height:20px;
background:#ccc;
list-style-type: none;
display: inline-block;
margin-right:20px;
}
.wrap ul li{
width:300px;
height:300px;
border:1px solid lightgrey;
list-style-type: none;
}
.hide{
display:none;
}
.active{
border-bottom:2px solid #d45d5c;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><div class="div1 ">div1</div></li>
<li><div class="div2">div2</div></li>
<li><div class="div3">div3</div></li>
</ul>
</div>
<div class="wrap">
<ul>
<li class="hide">when hover div1, show DIV1</li>
<li class="hide">when hover div2, show DIV2</li>
<li class="hide">when hover div3, show DIV3</li>
</ul>
</div>
<script type="text/javascript" src="../jquery-2.2.4.js"></script>
<script type="text/javascript">
$(function(){
var timer=null;
function hideIt(){
$(".wrap li").filter(":visible").stop(true,true).slideUp(500,function(){
})}
$(document).on("mouseenter",".nav li",function(){
var delayTime;
var lastIndex=$(".nav li.active").index();
var thisIndex=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
if(lastIndex<0){
$(".wrap li").eq(thisIndex).slideDown()
} else{
$(".wrap li").eq(lastIndex).stop(true,true).delay(400).slideUp();
$(".wrap li").eq(thisIndex).stop(true,true).delay(400).slideDown();
}
})
.on("mouseleave",".nav li",function(){
var $this=$(this);
timer=setTimeout(function(){
hideIt();
$this. removeClass("active");
}
,400)
})
.on("mouseleave",".wrap li",function(){
hideIt();
$(".nav li").removeClass("active");
})
.on("mouseenter",".wrap li",function(){
clearTimeout(timer);
})
})
</script>
</body>
两个DIV之间不存在亲子关系时,保证hover div1, div2 slideToggle, 而且能hover div2: 借助timer=setTimeout(), 设置延时的方法
最新推荐文章于 2021-10-14 18:05:42 发布