javascript - 侧边栏切换内容被挤压

Question

下面是我的代码:

html:

<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
    <div id="result"></div>
</div>
 <div id="header" class="container-fluid">
    <div class="navbar">
        <a href="#menu-toggle" id="menu-toggle" >Press</a>    
        <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior  <span id="counterId"></span></div>
    </div>
</div>

CSS:

#wrapper {
    width: 100vw;
    padding-left: 0;
    -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: 250px;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed; 
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y:auto;
    background: #5F657C;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

js:

$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});

jsfiddle 如下: JSFIDDLE

我的问题是左侧的黄色 div，当侧边栏向左滑动时，里面的内容有点挤在一起。

我想让它只是隐藏在下面，不希望内容被挤压。你们有什么想法吗？

Answer 1

你可以这样做:

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

           #wrapper {
             padding-left: 0;
             -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: 250px;
           }
           #sidebar-wrapper {
             z-index: 1000;
             position: fixed;
             left: -250px;
             width: 250px;
             height: 100%;
             overflow-y: auto;
             background: #050545;
             -webkit-transition: all 0.5s ease;
             -moz-transition: all 0.5s ease;
             -o-transition: all 0.5s ease;
             transition: all 0.5s ease;
             box-shadow: inset -10px 0px 10px -7px grey;
           }
           #wrapper.toggled #sidebar-wrapper {
             left: 0;
           }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
  <div id="sidebar-wrapper" style="background-color:yellow">sidebar content show here
    <div id="result"></div>
  </div>
  <div id="header" class="container-fluid">
    <div class="navbar">
      <a href="#menu-toggle" id="menu-toggle">Press</a> 
      <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>
      </div>
    </div>
  </div>
</div>

宽度默认设置为 250px。在我的代码片段中，我正在使用偏移量 left 来隐藏/显示侧边栏。研究我的代码，您将了解它是如何工作的。