通过层实现页面部分内容展开与收缩

核心提示：有时我们开发时，会遇到一个页面分为好几大块，通过层实现页面部分内容展开与收缩，整个页面显示起来比较冗长，此时， <STYLE> .expanded { } .collapsed { DISPLAY: none; }</STYLE> 2 一段脚本，实现onclick事件或其他事件处理的方

有时我们开发时，会遇到一个页面分为好几大块，整个页面显示起来比较冗长。此时，可以通过收缩部分内容，先对展开内容进行操作，然后收缩起来再对收缩的内容进行展开。

　  1  必须的样式表，控制显示和隐藏。

  <STYLE>
　 .expanded
　 {
　 
　 }
　 .collapsed
　 {
　 DISPLAY: none;
　 }

</STYLE>

　  2  一段脚本，实现onclick事件或其他事件处理的方法。

  <script language="javascript">
  <!--
　 function change()
　 {
　  var child = document.all[event.srcElement.getAttribute("child",false)];
　  if (null != child){
　　 if(child.className == "expanded")
　　 {
　　  child.className = "collapsed";
　　  return;
　　 }
　　 if(child.className == "collapsed")
　　 {
　　  child.className = "expanded";
　　  return;
　　 }
　  }
　 }
  //-->
  </script> 

3　 如何在html使用。

　 <p align="center">是否显示 <input type="checkbox"   child="all" /></p>
　　　  <div  class="collapsed" id="all">  <!--初始为不显示-->

<table>

<tr>
　　　　　　  <td> 属性名：
　　　　　　　  <input name="nameData3" type="text" id="nameData3" /></td>
　　　　　　  <td> 属性值：
　　　　　　　  <input name="valueData3" type="text" id="valueData3" />
　　　　　　  </td>
　　　　　  </tr>
　　　　　  <tr>
　　　　　　  <td> 属性名：
　　　　　　　  <input name="nameData4" type="text" id="nameData4" /></td>
　　　　　　  <td> 属性值：
　　　　　　　  <input name="valueData4" type="text" id="valueData4" />
　　　　　　  </td>
　　　　　  </tr>
　　　　  </table>

</div>