前端Js左侧菜单栏伸缩功能（隐藏/显示）

      网上搜索的方法代码很多，就是比较复杂，逻辑还没有搞懂，我想到更简单的方法，比如小学生做算术题，你不会做就数手指脚趾头的笨方法咯；不管白猫黑猫能抓到老鼠就是好猫，能实现该功能就行；

首先界面我这里就省略了，大家应该都会写界面了，我的界面大概如下，现在点击按钮图1想隐藏左2所有的区域，在按一次就在展示出来，如下所示；

1.展开状态（显示）：

2.缩进状态（左二隐藏）：

    

就是点击图片的按钮就缩进，再点击一次就展开，这个怎么实现?我的思路是建两个按钮，每个按钮的onclick事件，按钮图1按钮先显示按钮图2隐藏，用户按按钮图1按钮执行的是onclick事件1，把菜单缩进后，按钮图1按钮就隐藏图2按钮就出来，点击的时候就是执行onclick事件2

首先看看Xxx.html 这个图片按钮的布局：

<!-- 伸缩栏1，就是按钮图1 -->
<div id="nav_show" onclick='xsyc()' style="position:absolute; bottom:0px; padding:10px;left: -10px;"  title="显示/隐藏"> <!-- onclick='xsyc()'事件1 -->
        <a href="#">
          <img id="show_hide_btn" alt="显示/隐藏" title="显示/隐藏" src="img/image/yansedan.png"> <!-- 这个图片颜色淡点 -->
        </a>
     </div>

 <!-- 伸缩栏2（按钮图2） 其实就是两个图片重叠再一起-->
    <!-- visibility: hidden;这个先设置这个按钮图片2不展示出来 -->
    <div id="nav_show2"  onclick='xsyc2()' style="position:absolute; bottom:0px; padding:10px;left: -10px;visibility: hidden;" title="显示/隐藏"> <!-- onclick='xsyc2()'事件2 -->
        <a href="#">
          <img id="show_hide_btn2" alt="显示/隐藏" title="显示/隐藏" src="img/image/yanseshen.png"> <!-- 这个图片颜色深点 -->
        </a>
     </div>

Css文件略，其实就是我最初布局展开的原始状态；

Xxx.js 就是写方法的时候了，事件的值都是根据自己的界面去进行调整，看你要调整哪些，要隐藏哪些，缩进哪些部分，比如我就要隐藏左2（left_menu_cnt）所有区域，但是会影响其他区域，所以其他区域还要跟着调整：

function xsyc(){ //缩进功能（隐藏左二区域），右侧区域的都要跟着改变
      document.getElementById('left_menu_cnt').style.visibility='hidden'; //隐藏左2区域所有内容（含左上）
      document.getElementById('two-top').style.marginLeft= '60px';  //右侧上区域向左挪动，缩进
      document.getElementById('container-fluid').style.marginLeft = "60px" //右侧全部向左挪动，缩进
      document.getElementById('container-fluid').style.width = "1580px" //右侧区域向左挪动后，右侧留有空白，让它变宽
      document.getElementById('nav_show').style.visibility='hidden'; //让图片1消失
      document.getElementById('nav_show2').style.visibility='visible'; //让图片2显示出来，为的就是执行下面的按钮功能，缩进
    }

    //展开功能，取消隐藏
    function xsyc2(){  //其实就是还原上面的xsyc()，参数都和CSS一样
      document.getElementById('left_menu_cnt').style.visibility='visible'; //与上面相反
      document.getElementById('two-top').style.marginLeft= '280px'; //与上面相反，恢复CSS中的值
      document.getElementById('container-fluid').style.marginLeft = "280px" //与上面相反，恢复CSS中的值
      document.getElementById('container-fluid').style.width = "1360px" //与上面相反，恢复CSS中的值
      document.getElementById('nav_show2').style.visibility='hidden'; //让图片2消失，
      document.getElementById('nav_show').style.visibility='visible'; //让图片1显示出来，为的就是执行上面面的按钮功能，展开

    }

不知道大家看懂没有？其实思路非常简单，就是傻瓜式一个个挪动，用户应该感觉不出来，技术有限，方法比较笨，仅供参考，不建议采用，应该还有更高端的方法，我还不懂。