我想要一种效果：用javascript 和div 实现展开和收缩 div 层的功能！100 分，必结贴！
假如 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 层中的内容
， 要如何能办到呢？
[解决办法]
function load(Div,image)
{
var a=document.getElementById(Div).style.display;
if(a== " ")
{
hiddena(Div,image);
}
else if(a== "none ")
{
showa(Div,image);
}
}
//////////////////////////////
/////////////////////////////////////
function hiddena(Div,image)
{
document.getElementById(Div).style.display= "none ";
document.getElementById(image).style.background= "url(image/ico_down.gif) no-repeat scroll right bottom ";
}
function showa(Div,image)
{
document.getElementById(Div).style.display= " ";
document.getElementById(image).style.background= "url(image/ico_up.gif) no-repeat scroll right bottom ";
}
[解决办法]
<!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> test </title>
</head>
<style>
.btn{width:60px;height:25px;padding-top:3px;border:1px solid #999999;background:#f0f0f0;}
</style>
<script>
function displayDiv(obj)
{
if(document.getElementById( "divOrders ").style.display== "none ")
{
document.getElementById( "divOrders ").style.display= "block ";
document.getElementById( "btnDisplay ").value= "隐藏 ";
}
else
{
document.getElementById( "divOrders ").style.display= "none ";
document.getElementById( "btnDisplay ").value= "显示 ";
}
}
</script>
<body>
<table width= "500 " border= "0 " cellspacing= "1 " cellpadding= "1 ">
<tr>
<td colSpan= "2 ">
<div>
<input type= "button " name= "btnDisplay " value= "隐藏 " onclick= "displayDiv(document.getElementById( 'divOrders ')) " class= "btn " />
</div>
<div id= "divOrders ">
<table>
<tr>
<td> 这里是工作单内容 </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
[解决办法]
不必那么复杂，针对两个服务器端对象编程就行了：
<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>
在page_load中写：
this.Button1.Attributes[ "onclick "]= "var x= "+this.divOrders.ClientID+
";x.style.display=x.style.display== 'none '? 'inline '; 'none '; ";
[解决办法]
这是我做的一个东西 跟你想要的效果一样
<input type= "button " value= "选择 " onclick= "Track() " />
function Track()
{
toExit( 'show ', 'boysoft ')
document.getElementById( 'boysoft ').style.display= " "
document.getElementById( 'boysoft ').style.left=window.event.clientX;
document.getElementById( 'boysoft ').style.top=window.event.clientY;
}
<div id= "boysoft " class= "aa " style= "height: 80px; position: absolute; visibility: hidden; width: 180px; z-index: 1 ">
<table cellpadding= "0 " border= "0 " cellspacing= "0 " width= "200 " height= "100 " bgcolor= "#000000 ">
<tr height=20>
<td valign= "top " align= "left " bgcolor= "#999999 ">
<!--目录选择-->
</td>
<td valign= "top " align= "right " bgcolor= "#999999 ">
<a onclick= "toExit( 'hide ', 'boysoft ') " href= "# ">
<img src= "../Images/Common/closeb.gif " border= "0 "> </a>
</td>
</tr>
<tr>
<td bgcolor= "f4f4f4 ">
</td>
<td bgcolor= "f4f4f4 " align=left valign= "top ">
<asp:TreeView EnableClientScript=true ID= "tvCatalog " runat= "server " ShowExpandCollapse= "true " ShowLines= "True " ExpandDepth= "2 " >
<SelectedNodeStyle BackColor= "Silver " />
<NodeStyle ForeColor= "Navy " />
</asp:TreeView>
</td>
</tr>
<tr>
<td align= "center " colspan= "2 " bgcolor= "f4f4f4 ">
<input type= "button " value= "关 闭 " id= "Button7 " language= "javascript " onclick= "toExit( 'hide ', 'boysoft ') " />
</td>
</tr>
</table>
</div>
这部分放到一个*.js中
ie4=(document.all)?true:false;
ns4=(document.layers)?true:false;
function toExit()
{
var args=toExit.arguments;
var visible=args[0];
if(ns4){
theObj=eval( "document.layers[\ ' "+args[1]+ "\ '] ");
if(theObj)theObj.visibility=visible;
if(visible== "show ")
{
makeRequest( '0 ');
document.getElementById( 'TxtBackfeed ').focus();
}
else
{
document.getElementById( 'TxtBackfeed ').value= " ";
}
}
else if(ie4){
if(visible== 'show ')visible= 'visible ';
if(visible== 'hide ')visible= 'hidden ';
theObj=eval( "document.all[\ ' "+args[1]+ "\ '] ");
if(theObj)theObj.style.visibility=visible;
}
}
[解决办法]
重新贴一下吧：
<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函数的倾向，如果要求程序员写这样的一个用户控件用于组装你的多个页面，就要问问他“如何保证此函数命名肯定不会与别的命名重复？”。
[解决办法]
如果你用asp.net 2.0，那么很幸运，这样的功能人家都给你写好现成的控件了：
http://ajax.asp.net/ajaxtoolkit/CollapsiblePanel/CollapsiblePanel.aspx
这段时间倒霉透顶了，海底光缆断了，国外的网站打开实在太难了，如果你在打不开，我有以前下载的控件包，需要的话我可以发一份。
[解决办法]
如果最初说要保持状态，那么很可能会基于服务器端实现，使用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）。
[解决办法]
<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>
