折叠一个列并自动调整另一个

Question

我正在努力与我的用户界面（bootstrap）。我可以通过点击左边的小按钮来隐藏navbar。这工作很好，没有任何问题。它由css和一些包装完成。但是我无法为右侧（绿色面板）执行相同的功能。我也试图在崩溃课上做。如果我这样做，主要内容（红色窗口）不会自动缩放到右侧的全部可用空间。那么怎样才能隐藏绿色面板并在整个宽度上缩放红色内容？这可以通过CSS或JavaScript完成。任何帮助，将不胜感激。

小提琴：https://jsfiddle.net/DTcHh/27545/

CSS：

/* Sidebar Navigation Style */ 
.nav-sidebar { 
    position: absolute; 
    padding-left: 10px; 
    width: 175px; 
    height: 100%; 
    z-index: 1000; 
    display: block; 
    background-color: #eee; 
    border-right: 1px solid #eee; 
} 

/*   Wrapper   */ 
#wrapper { 
    padding-left: 175px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#wrapper.toggled { 
    padding-left: 0px; 
} 

/*  Sidebar Wrapper  */ 
#sidebar-wrapper { 
    z-index: 1000; 
    left: 0px; 
    width: 0; 
    height: 100%; 
    margin-left: -205px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#sidebar-wrapper::-webkit-scrollbar { 
    display: none; 
} 

/*  Main SVG Content  */ 
#visualization { 
    display: inline-block; 
    position: relative; 
    left: 0px; 
    width: 100%; 
    padding-bottom: 100vh; /* aspect ratio */ 
    overflow: hidden; 
} 

HTML：

<div class="container-fluid"> 
<div id="wrapper"> 
    <div id="sidebar-wrapper"> 
     <ul class="nav nav-sidebar sidebar"> 
      <li class="sidebar-brand"> 
       <a>NavBar</a> 
      </li> 
     </ul> 
    </div> <!-- End Sidebar Wrapper --> 
    <div class="row" id="row-main-content"> 
     <div class="col-xs-9" style="background-color: red"> 
      <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-indent-right" id="btnHide"></button> 
      <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-list-alt pull-right" id="btnHide2"></button> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div id="visualization"> 
        </div> 
       </div> 
      </div> 
     </div> <!-- End Page Content Wrapper --> 
     <div class="col-xs-3" style="padding-right: 0px"> 
      <div class="panel panel-default"> 
       <div class="panel-body" style="height: 100vh; background-color: green"> 

       </div> 
      </div> 
     </div> <!-- End Panel Wrapper --> 
    </div> <!-- End Row --> 
</div> <!-- End Wrapper --> 
</div> 

的JavaScript：

/* Functionality for Toggle Sidebar Button */ 
$("#btnHide").click(function() { 
    $(this).tooltip("hide"); 
    $('#wrapper').toggleClass('toggled'); 
}); 

Answer 1

现在我解决我的问题与更新小提琴的jQuery

一点点的帮助：https://jsfiddle.net/DTcHh/27617/

jQuery Part我的问题：

$("#btnHide2").click(function() { 
    $(this).tooltip("hide"); 

    if ($('#panel-wrapper').hasClass('collapse')) { 
     $('#page-content-wrapper').removeClass('col-xs-12').addClass('col-xs-9'); 
     $('#panel-wrapper').removeClass('collapse') 
    } 
    else { 
     $('#page-content-wrapper').removeClass('col-xs-9').addClass('col-xs-12'); 
     $('#panel-wrapper').addClass('collapse') 
    } 
});