以下是一个框架集，框架的结构是：顶部一行，下面分三列，三列中最左侧是菜单，中间列是折叠按钮，最右侧是主显示区。

<frameset rows="100,*" cols="*" framespacing="0" frameborder="NO" border="0" >
  <frame src="Top.asp" name="topFrame" scrolling="NO" noresize >
  <frameset cols="170,10,*" frameborder="NO" border="0" framespacing="0" name="butFrame">
    <frame src="Menu.asp" name="leftFrame" scrolling="auto" noresize>
    <frame src="midBut.asp" name="midFrame" scrolling="no">
    <frame src="Detect.asp" name="mainFrame">
  </frameset>
</frameset>

效果如下表格所示：

顶部（topFrame）
菜单 （leftFrame）	折叠按钮（midFrame）	主显示区（mainFrame）

想实现的效果是：点击中间的折叠按钮，可折叠左侧的菜单，让主显示区变大，按钮居于最左侧，再点按钮则恢复菜单显示。

一开始的思路是单独改变菜单iframe和主显示区iframe的宽度，一个减少，一个增加，这样就可以达到效果，但是可惜的是虽然iframe的尺寸改变实现了，但是整体效果却没达到，因为菜单区可以缩小，但是主显示区却无法增加，并且菜单区缩小之后也留下空白，主显示区不会随之补充过去，让人郁闷。搞了大半天换了几个别的方法也是达不到效果。最后想到猫扑上也有这种效果，就去看了下，顺滕摸瓜，两分钟不到，一句代码 document.frames('leftiframe').mainleft.rows="50%,*,30"; 引起了我的注意，马上就知道有门。因为我之前操作的都是单个iframe，没有想到框架集整体重设，按照这个思路来修改我的代码，果然，马上效果完美的呈现出来了，哈哈，真是高兴。

下面把我写的代码贴一下，供朋友们参考，有问题多交流 ^_^ (碧海澜涛)

<script language="JavaScript" type="text/javascript">
function toLeft()
{
 document.getElementById("id_but_l").style.display="none"; //我是做了向左向右两个按钮,这两句改变按钮方向
 document.getElementById("id_but_r").style.display="block";
 parent.document.all('butFrame').cols="0,10,*";
}
function toRight()
{
 document.getElementById("id_but_l").style.display="block";//这两句改变按钮方向
 document.getElementById("id_but_r").style.display="none";
 parent.document.all('butFrame').cols="170,10,*";
}
</script>

<table height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10" height="100%" align="center" bgcolor="#80ACDB" id="id_but_l" style="cursor:pointer;display:block;" onMouseDown="toLeft()" title="点击折叠左侧菜单"><img src="images/toLeft.gif" width="6" height="9"></td>
    <td width="10" align="center" bgcolor="#80ACDB" id="id_but_r" style="cursor:pointer;display:none;" onMouseDown="toRight()" title="点击展开左侧菜单"><img src="images/toRight.gif" width="6" height="9"></td>
  </tr>
</table>