最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

Js实现产品列表内容的收起与展开效果

html 有客 832浏览 0评论
<!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实现产品列表内容的收起与展开效果

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址