如何将我的幻灯片菜单放回左侧并在开始时将其隐藏？答案

【问题标题】：How to put my slide menu back to left and hide it in the beginning?如何将我的幻灯片菜单放回左侧并在开始时将其隐藏？
【发布时间】：2015-07-11 03:23:27
【问题描述】：

$(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>

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

我的问题是，当我再次单击切换按钮时如何放回幻灯片菜单当您在整页上查看时，您可以看到我的幻灯片菜单。如何在开始时隐藏菜单，仅在单击切换按钮时显示，并且在向后滑动时再次隐藏？

【问题讨论】：

标签： javascript jquery html css

【解决方案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：错别字

【讨论】：

【解决方案2】：

您应该使用 slidetoogle() 而不是手动进行。这是一个提供演示和代码的链接。

$('#myDiv').toggle(effect, options, duration);

http://jsfiddle.net/hcmLw/2/light/

【讨论】：