点击箭头 隐藏/展开 左侧导航

一、确保左侧导航div固定宽度，右侧内容div不设置宽度

二、在左侧内容div  和 右侧内容 div 中间 添加如下代码：

<div style="width:10px; float:left; ">

<table>

<tr><td height="200px"></td></tr>

<tr><td><img id="img_arrow" src="/images/arrow_left.jpg" onclick="usr()"/></td></tr>

</table>

</div>

<script>

function usr()  {

var img_arrow= document.getElementById("img_arrow");

if(img_arrow.src.indexOf("arrow_left") >= 0)    {

//收缩   arrow_left 左向箭头名称，arrow_right 右向箭头名称

img_arrow.src=img_arrow.src.replace("arrow_left","arrow_right");      //   切换箭头图片

document.getElementById("s4-leftpanel").style.display="none";          // 隐藏左侧导航

document.getElementById("MSO_ContentTable").style["margin-Left"]="10px";       //   修改、减小右侧导航margin-Left，箭头图片宽度为10px

}

else    {

//展开

img_arrow.src=img_arrow.src.replace("arrow_right","arrow_left");

document.getElementById("s4-leftpanel").style.display="block";

document.getElementById("MSO_ContentTable").style["margin-Left"]="203px";

}

}

</script>