js中,實現頁面的伸縮與擴展

（1）首先，頁面分為左右2個部分（下圖是縮短時的效果），如下圖所示：

（2）jsp頁面中

<div class="row inner">
        <div class="col-xs-4" id="inner-left"> <div class="panel-heading">目錄</div>
              <div class="panel-body" style="height:580px;overflow-y:scroll;">
                   <ul id="category">根目錄</ul>
              </div>
        </div>
        <div class="col-xs-8" id="inner-right">
                <div class="panel-heading">
                    <ol class="breadcrumb">
                        <li class="active" id="showName">列表</li>
                    </ol>
                    <div class="toggle-box">
                        <a href="javascript:void(0);" class="open-btn" id="open-btn" title="擴展"><span></span></a>
                        <a href="javascript:void(0);" class="closed-btn" id="closed-btn" title="折疊"></a>
                    </div>
                </div>
                <div class="panel-body">                    
                    <!--table-->
                    <table class="table table-striped table-bordered" id="dataTables" style="white-space: nowrap;width: 100%;">
                         //東西
                    </table>
                 </div>
          </div> 
 </div>

(3)js中，實現頁面的縮短或者擴展，使用removeClass移除class元素，使用addClass添加class元素。

說明：row的一行總長為col-xs-12

//左側目錄收展效果
    $("#closed-btn").click(function(){
        $("#inner-left").hide();
        $("#inner-right").removeClass("col-xs-8").addClass("col-xs-12");
        $("#dataTables").width("100%");
    });
    $("#open-btn").click(function(){
        $("#inner-left").show();
        $("#inner-right").removeClass("col-xs-12").addClass("col-xs-8");
        $("#dataTables").width("100%");
    });

4）擴展后，頁面顯示的效果為：