<!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>
<title>js内容显示与隐藏</title>
<style type="text/css">
#main {width:500px; font-size:12px; border:1px solid #FFC44C; }
#box1 {width:500px; height:80px; }
.box2 {border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFC44C solid; }
.boxS {border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFE6B3 solid;margin-bottom:1px; }
.box3 {border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:none; }
.boxt {border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:block; }
#box4 {width:500px; height:5px; background:#FFF7E5; position:relative; }
#box4 span {width:80px; border:1px #FFC44C solid; position:absolute; left:40%; top:5px; background:#FFF7E5; border-top:none; text-align:center; cursor:pointer; }
</style>
<script type="text/javascript">
window.onload=function(){
var box_2 = document.getElementById("box2");
var box_3 = document.getElementById("box3");
var box_4 = document.getElementById("box4").getElementsByTagName("span")[0];
box_4.onclick=function(){
box_3.className=(box_3.className=="box3")?"boxt":"box3";
box_2.className=(box_2.className=="boxS")?"box2":"boxS";
this.innerHTML=(this.innerHTML=="隐藏内容")?"显示更多":"隐藏内容";
}
}
</script>
</head>
<body>
<div id="main">
<div id="box1"></div>
<div id="box2" class="boxS"></div>
<div id="box3" class="box3">
<ul>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
<li>测试文字：你爱我吗？</li>
</ul>
</div>
<div id="box4"><span>显示更多</span></div>
</div>
</body>
</html>
转载请注明：有客帮 » Js实现产品列表内容的收起与展开效果