javascript - 如何将我的幻灯片菜单放回左侧并隐藏在开头？

Question

$(document).ready(function(){
      $('.toggle-summary').click(function(){
        $('.book-summary').animate({left:"0px"});
        $('.book-body').css('left', '250px');
      });


    });

readbook .col-sm-10 {
  border: 1px solid #888888;
  height:100%;
}

#arrow-back {
  padding-top:7px;
}

.book-summary {
  border: 1px solid #888888;
  position: absolute;
  left:-250px;
  top:0;
  width:250px;
  background-color: #f8f8f8;
  z-index: 1;
}

.book-body {
  border: 1px solid #888888;
  position: absolute;
  left:0;
  top:0;
  right:0;
}

.toggle-summary {
  display:block;
  color:#888888;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container readbook">
  <div class="row">
    <div class="col-sm-10 col-sm-offset-1">
      <div class="book-summary">Slide menu</div>
      <div class="book-body">
        <div class="body-inner">
          <div class="book-header">
            <a href="#" class="toggle-summary"><i class="fa fa-align-justify fa-lg"></i></a>
          </div>
          <div class="page-wrapper">
            content body.content body.content body.content body.content body.content body.content body.content body.content body.content body.content body.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我写了一些代码让我的菜单从左向右滑动，内容也会向右移动一点。

我的问题是，当我再次单击切换按钮时如何将幻灯片菜单放回原处当你全页查看时，你可以看到我的滑动菜单。如何在开始时隐藏菜单，只在点击切换按钮时显示，然后在滑动回来时再次隐藏？

Answer 1

我会使用一个类并切换它而不是通过 jQuery 控制样式。你可以看到一个有效的 example in this fiddle .

这是给你的 css 和 jquery。

CSS:

readbook .col-sm-10 {
  border: 1px solid #888888;
  height:100%;
}

#arrow-back {
  padding-top:7px;
}

.book-summary {
  border: 1px solid #888888;
  position: absolute;
  left:-250px;
  top:0;
  width:250px;
  background-color: #f8f8f8;
  z-index: 1;
  transition: all .3s;
}

.book-summary.active{
  left: -0px;
}

.book-body {
  border: 1px solid #888888;
  position: absolute;
  left:0;
  top:0;
  right:0;
  transition: all .3s;
}

.book-body.active{
  left: 250px;  
}


.toggle-summary {
  display:block;
  color:#888888;
}

jQuery:

$(document).ready(function(){
   $('.toggle-summary').click(function(){
      $('.book-summary').toggleClass('active');
      $('.book-body').toggleClass('active');
   });
});

编辑 1:错别字