关于DIV+JS实现收缩效果的两个问题,急求指导

jackq28 2012-08-27 02:19:16
下面的代码是已经实现了的收缩效果,收缩栏里是表单供客户填写。在此基础上还要增加两个功能:一是开始只能有一个空白表单,当客户提交完一个后,在下方又可以自动生成一个收缩栏以供客户继续填写;二是当有多个DIV收缩的时候,每次只能展开一个收缩栏,其余的都保持收起状态。请问该如何修改代码实现,求指导?
<!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=gb2312" />
<title></title>
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
.box{width:300px; margin:10px; border:1px solid #ccc; overflow:hidden; position:relative; font-size:12px;}
.oHx{height:30px; background:#eee; line-height:30px; font-size:14px; text-indent:14px; cursor:pointer;}
.fold{position:absolute; top:9px; right:12px;}
.box_content{line-height:18px; overflow:hidden; display:none;}
</style>
<script type="text/javascript">
function getElementsByClassName(className,id,tag){
tag = tag || "*";
if(id){
var id = typeof id == "string" ? $(id) : id;
}else{
var id = document.body;
}
var els = id.getElementsByTagName(tag),arr = [];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
if(k[j]==className){
arr.push(els[i]);
break;
}
}
}
return arr;
};
function Slide(slideClass,slideBtn,slideCon,slideSpeed) {
this.oSlides = getElementsByClassName(slideClass);
this.oTimer = null;
this.slideBtn = slideBtn;
this.slideCon = slideCon;
this.slideSpeed = slideSpeed;
}
Slide.prototype = {
oTimer:null,
_init:function (){
this._slideEvent();
},
_slideEvent:function (){
var This = this;
for(var i = 0,n=This.oSlides.length;i<n;i++){
(function(n){
var oSlide = This.oSlides[n];
var oSlideBtn = getElementsByClassName(This.slideBtn,oSlide)[0];
var oSlideCon = getElementsByClassName(This.slideCon,oSlide)[0];
oSlideBtn.onclick = function (){
if(oSlideCon.style.display == "block" && This.oTimer == null){
This._slideClose(oSlideCon);
}else if(!(oSlideCon.style.display == "block" ) && This.oTimer == null){
This._slideOpen(oSlideCon);
}
}
})(i)
}
},
_slideOpen:function (slideCon){
var This = this;
slideCon.style.display = "block";
slideCon.style.height = "auto";
var slideHeight = slideCon.offsetHeight;
slideCon.style.height = 0 + "px";
This.oTimer = setInterval(function (){
if(slideCon.offsetHeight < slideHeight){
slideCon.style.height = slideCon.offsetHeight + 2 + "px";
}else{
clearInterval(This.oTimer);
This.oTimer = null;
}
},This.slideSpeed);
},
_slideClose:function (slideCon){
var This = this;
This.oTimer = setInterval(function (){
if(slideCon.offsetHeight <= 0){
clearInterval(This.oTimer);
slideCon.style.display = "none";
This.oTimer = null;
}else{
slideCon.style.height =slideCon.offsetHeight - 2 + "px";
}
},This.slideSpeed);
}
}
</script>

</head>

<body>
<table width="316" border="1">
<tr>
<th width="69" scope="col">名称</th>
<td width="231" scope="col"><div align="center">文体厂</div></td>
</tr>
<tr>
<td><div align="center"><strong>识别号</strong></div></td>
<td><div align="center">3210</div></td>
</tr>
</table>
<div class="box">
<div class="oHx slide">收缩1</div>
<div class="box_content">
<ul class="uft" style="padding:10px;">

<form action="" method="post">
<select name="zsxm" >
<option value="city">1
<option value="yinhua">2
<option value="education">3
<option value="localedu">4
</select><br />
<select name="zspm" >
<option value="town">1
<option value="hetong">2
<option value="education">3
<option value="localedu">4
</select><br />
总额(量) <input type="text" name="count" /><br />
扣除额(量) <input type="text" name="count" /><br />
已缴金额 <input type="text" name="count" /><br />
减免金额<input type="text" name="count" /><br />
<input type="submit" />
</form>
</ul>
</div>
</div>

<script type="text/javascript">
var mySlide = new Slide("box","slide","box_content",15);
mySlide._slideEvent();
</script>

</body>
</html>
...全文
68 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧