这次的jQuery代码写得有点繁琐和混乱,
而且多次出现重复代码,也懒得去修改了。
sd-style.css
#slide-down {
width:753px;
height:80px;
position:absolute;
top:100px;
left:300px;
}
#slide-down-p1, #slide-down-p2, #slide-down-p3 {
width:246px;
height:70px;
position:absolute;
border:1px solid #ccc;
background:#fff;
}
#slide-down-p1 {
left:0px;
}
#slide-down-p2 {
left:252px;
}
#slide-down-p3 {
left:504px;
}
#slide-show {
width:750px;
height:200px;
background:#fff;
display:none;
clear:both;
position:absolute;
top:70px;
border:1px solid #999;
z-index:1;
}
#slide-show-p1, #slide-show-p2, #slide-show-p3 {
width:750px;
height:190px;
display:none;
}
#slide-show-p1 {
background:#fff;
}
#slide-show-p2 {
background:#fff
}
#slide-show-p3 {
background:#FFF;
}
#slide-down .add-border {
border:1px solid #999;
z-index:3;
}
#slide-down .remove-bottom-border {
border-width:1px 1px 0 1px;
}
#slide-down .show-that {
display:block;
z-index:1;
}
#slide-down .show-that div {
z-index:1;
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<link href="sd-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="slide-down">
<div id="slide-down-p1">
</div>
<div id="slide-down-p2">
</div>
<div id="slide-down-p3">
</div>
<div id="slide-show">
<div id="slide-show-p1">1
</div>
<div id="slide-show-p2">2
</div>
<div id="slide-show-p3">3
</div>
</div>
</div>
<script>
$(document).ready(function() {
slidedown = $("#slide-down");
slideshow = $("#slide-show");
slidedown.children().slice(0,3).hover(
function() {
if(slideshow.css("display") == "none") {
$(this).addClass("add-border");
}
if(slideshow.css("display") == "block") {
slidedown.children().slice(0,3).removeClass();
slideshow.children().css("display","none");
$(this).addClass("add-border");
$(this).addClass("remove-bottom-border");
}
},
function() {
if(slideshow.css("display") == "none") {
$(this).removeClass("add-border");
}
}
).click(function() {
if(slideshow.css("display") == "block") {
//$("#slide-show").removeClass("show-that");
slideshow.slideUp(100);
$(this).removeClass("remove-bottom-border");
} else {
//$("#slide-show").addClass("show-that");
slideshow.slideDown(100);
slideshow.children().css("display","none");
slidedown.children().slice(0,3).removeClass("add-border");
$(this).addClass("add-border");
$(this).addClass("remove-bottom-border");
}
});
$("#slide-down-p1").click(function() {
$("#slide-show-p1").css("display","block");
}).mouseover(function() {
$("#slide-show-p1").css("display","block");
});
$("#slide-down-p2").click(function() {
$("#slide-show-p2").css("display","block");
}).mouseover(function() {
$("#slide-show-p2").css("display","block");
});
$("#slide-down-p3").click(function() {
$("#slide-show-p3").css("display","block");
}).mouseover(function() {
$("#slide-show-p3").css("display","block");
});
});
</script>
</body>
</html>