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）扩展后，页面显示的效果为：