我想要一种效果：用javascript 和div 实现展开和收缩 div 层的功能！100 分，必结贴！

[tiger8000]

假如 pub.aspx 页中有如下代码：


<tr>
<td colSpan="2">
这里放一个按钮，控制以下 <div id="divOrders"> 层的伸展与收缩
</td>
</tr>

<tr>
<td colSpan="2">
<div id="divOrders">
<table>
<tr>
<td>这里是工作单内容</td>
</tr>
</table>
</div>
</td>
</tr>

------------------------------------------


我就是想通过 点击按钮,实现收缩与展开 div 层中的内容
， 要如何能办到呢？

[whb147]

哈哈哈,我是用html页测试的
如果有回发，你就用服务端编程吧。
你可以考虑用ajax，不刷新页面，呵呵呵

[whb147]

会写css的，就应该能看懂那个玩艺，呵呵

[以专业开发人员为伍]

重新贴一下吧：

<form id="form1" runat="server">
<table>
<tr>
<td colspan="2">
<input id="Button1" type="button" value="button" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="divOrders" runat="server">
<table>
<tr>
<td>
这里是工作单内容</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>

protected void Page_Load(object sender, EventArgs e)
{
this.Button1.Attributes["onclick"] = "var x=" + this.divOrders.ClientID +
";x.style.display=x.style.display=='none'?'inline':'none';";
}

我想要强调一点，如果比需求的东西多很多额外的代码，是非常危险的！例如对于写javascript函数的倾向，如果要求程序员写这样的一个用户控件用于组装你的多个页面，就要问问他“如何保证此函数命名肯定不会与别的命名重复？”。

[tiger8000]

sp1234:

老大的方法也试过了，很好，现在就差一个问题了，如果页面有刷新或回发的话，如何能保持住状态

[angleoldhen]

http://210.51.185.91/ch/t3/index.html 这个东西哪里有得下啊？

[whb147]

呵呵，写用户控件，就要写比较怪异的名字了，要不然，真的很难保证不重名。
但是，我们不能动动就跑到服务端去运行程序呀
毕竟服务器是自己的
客户端是客户的，哈哈哈哈
在服务器上出了问题会影响大家使用
在客户端，他最多重新启动以下机器。
呵呵

[tiger8000]

问题基本解决了，

现在就差一个问题了，如果页面有刷新或回发的话，如何能保持住状态

[liq330]

liq330(泉水叮咚) 的方法我基本能看懂，可是，我不太清楚，那几个方法应该在什么地方调 用？

能麻烦再给我说一下吗，非常感谢！

看你要在什么地方调用了.
/////////////////////////////////////

问题基本解决了，

现在就差一个问题了，如果页面有刷新或回发的话，如何能保持住状态

可以定义一下变量,我们假设变量有两个值,0,1
我们判断如果为0时就打开,如果为1时就收起来,就行了.然后把这个变量存到cookies里面.

[liq330]

var op=1;
if(op==1)
{
hidden(openDiv);
op=0;
document.getElementById("image").style.background="url(image/ico_down.gif) no-repeat scroll right bottom";

}
else if(op==0)
{
show(openDiv);
op=1;
document.getElementById("image").style.background="url(image/ico_up.gif) no-repeat scroll right bottom";

}

[tiger8000]

大哥，我的水平实在有限，如何保存在　cookies　里呢？就在帮我一下吧！

[liq330]

http://blog.sina.com.cn/u/49bb9cfe010004dq
http://blog.csdn.net/zhuwenbing/archive/2006/06/01/767441.aspx
自己去搜一下啊,javascript操作cookies

很多的.

[HAPPY冰石]

<tr>
<td colSpan="2">
这里放一个按钮，控制以下 <div id="divOrders"> 层的伸展与收缩
<input type="button" onclick="javascript:DisplayCtrl();" text="开关">
</td>
</tr>

<tr>
<td colSpan="2">
<div id="divOrders">
<table>
<tr>
<td>这里是工作单内容</td>
</tr>
</table>
</div>
</td>
</tr>

<script type="text/javascript" language="javascript">
function DisplayCtrl()
{
var obj = document.getElementById(Div);
if(obj.style.display='none')
obj.style.display = 'block';
else
obj.style.display = 'none';
}
</script>

[HAPPY冰石]

将上面的document.getElementById(Div)改为document.getElementById('divOrders')

[chestnuts]

现在的100分比3年前可难得多了
大家都在抢~
呵呵~

[以专业开发人员为伍]

如果最初说要保持状态，那么很可能会基于服务器端实现，使用divOrders的Visible来控制显示和隐藏而不是使用css样式，并且使用SmartNavigation或者Ajax来避免页面闪烁。

不过既然上边已经基于客户端实现了，那么就把状态也还是在客户端实现好了。增加一个HiddenField以及两行代码就足够了（实现同样功能的方法越是简单越是周全，不带来隐患）。

<form>以及后台内部全部代码如下：


<table>
<tr>
<td colspan="2">
<input id="Button1" type="button" value="button" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="divOrders" runat="server">
<table>
<tr>
<td>
这里是工作单内容</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<asp:HiddenField ID="HiddenField1" runat="server" OnValueChanged="HiddenField1_ValueChanged" />
<asp:Button ID="Button2" runat="server" Text="察看display状态保持效果" />


protected void Page_Load(object sender, EventArgs e)
{
this.Button1.Attributes["onclick"] = "var x=" + this.divOrders.ClientID +
";x.style.display=x.style.display=='none'?'inline':'none';"+
this.HiddenField1.ClientID+".value=x.style.display;";
if (!IsPostBack)
this.HiddenField1.Value = this.divOrders.Style["display"];
this.SmartNavigation = true; //这句可要可不要
}

protected void HiddenField1_ValueChanged(object sender, EventArgs e)
{
this.divOrders.Style["display"] = this.HiddenField1.Value;
}


我增加了两个控件，一个是HiddenField用于保存客户端状态，另外一个是按钮用于测试刷新时是否能够保持状态。

后台代码也非常容易看懂，可以看到面向对象的代码在扩展系统设计的时候非常简练直观地写，即不多也不少。

Button1的属性我增加了一句，使得客户端修改divOrders的display样式的时候保存状态到hiddenfield。

然后确保在第一此装载页面的时候为hiddenfield设置值。这个事必须的，不论你的divOrders的display样式初始是什么值都能正确反映。要求总能考虑到这一点对一个有经验的程序员一点也不过分。

最后，要捕获HiddenField的变化，将客户端状态保持为服务器端状态（ViewState）。

[tiger8000]

<asp:HiddenField ID="HiddenField1"

vs.net 中不认 这个控件，你说的是不是在 .net 2.0 中的啊？

[webdiyer]

如果你用asp.net 2.0，那么很幸运，这样的功能人家都给你写好现成的控件了：

http://ajax.asp.net/ajaxtoolkit/CollapsiblePanel/CollapsiblePanel.aspx

这段时间倒霉透顶了，海底光缆断了，国外的网站打开实在太难了，如果你在打不开，我有以前下载的控件包，需要的话我可以发一份。

[dyw31415926]

此等好贴,学习， 好东西要收藏!

[rocket2010]

帮顶...........

[adzhiming]

我也来学习学习