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

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

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

      <table>  

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

        <tr><td><img id="img_arrow" src="http://www.mamicode.com/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=http://www.mamicode.com/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=http://www.mamicode.com/img_arrow.src.replace("arrow_right","arrow_left");     

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

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

     }

  }    

</script>

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