现在很多论坛，都按左栏导航右栏内容的浏览方式，为了方便阅读，左栏导航可以折叠起来，也可以展开。
本程序就是要实现该功能，比较一下别人写的程序，自我感觉我写的这个是最简单整洁的。其原理就是通过 JavaScript 控制 frameset 的 cols 属性值来实现折叠和展开。
核心代码：
<script type="text/javascript" language="javascript">
<!--
function ExpandContents(controller)
{
mainFrame = parent.document.getElementById("mainFrame");
if (mainFrame.cols == "150,10,*")
{
//已经展开，收缩之，并更换控制指示
mainFrame.cols = "0,10,*";
controller.src = "controller_expand.gif";
controller.alt = "展开";
}
else
{
//已经收缩，展开之，并更换控制指示
mainFrame.cols = "150,10,*";
controller.src = "controller_collapse.gif";
controller.alt = "折叠";
}
}
-->
</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" background="controller_bg.gif">
<img src="controller_collapse.gif" alt="折叠" id="controller" onclick="javascript:ExpandContents(this);" />
</td>
</tr>
</table>
<!--
function ExpandContents(controller)
{
mainFrame = parent.document.getElementById("mainFrame");
if (mainFrame.cols == "150,10,*")
{
//已经展开，收缩之，并更换控制指示
mainFrame.cols = "0,10,*";
controller.src = "controller_expand.gif";
controller.alt = "展开";
}
else
{
//已经收缩，展开之，并更换控制指示
mainFrame.cols = "150,10,*";
controller.src = "controller_collapse.gif";
controller.alt = "折叠";
}
}
-->
</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" background="controller_bg.gif">
<img src="controller_collapse.gif" alt="折叠" id="controller" onclick="javascript:ExpandContents(this);" />
</td>
</tr>
</table>
注意：以上代码是建立在左栏宽度为 150，控制栏宽度为 10 的基础上的，您可以根据实际需要进行修改这些数字。
说明：由于美工不行，涉及的相关图片是从网站上下载的。
下载 可折叠左栏导航 完整代码，支持 IE、FF 等浏览浏览器。
