在同一按钮上滑入和滑出内容

Question

我试图在点击条形图标时从左侧创建滑入式内容（不是菜单，但效果相同）。我已经设法通过一个按钮来打开，另一个按钮来关闭（即将页面向左和向后移动）。但是现在，我试图只用一个按钮来做同样的事情，所以一开始点击它就会打开内容，第二次点击就会关闭。我是新来的Javascript/jQuery的东西，所以我在网上搜索并调整它，试图让它工作。

我在这里有一个测试JsFiddle所以你可以看到什么是错的，并希望能帮助我。

的Javascript：

var main = function() { 
$('.icon-menu').click(function(){ 
    $('.menu').toggle(
    function(){ 
     $('.menu').animate({ 
     left: "0px"}, 200); 
    }, 
    function(){ 
     $('.menu').animate({ 
     left: "600px"}, 200); 
    }); 
}); 
}; 

$(document).ready(main); 

HTML：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="icon-menu icon-close col-xs-1"> 
      <i class="fa fa-bars fa-4x"></i> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="menu col-md-5"> 
      <div class="texto-about col-md-offset-1"> 
       <h1>About</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, quia.</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

body { 
background-color: grey; 
} 

.menu { 
background-color: blue; 
left: -600px; /* same as width */ 
height: 100%; 
position: fixed; 
/* width: 600px; */ 
} 

.texto-about { 
color: #fff; 
font-size: 15px; 
text-decoration: none; 
} 

.icon-menu { 
color: #fff; 
cursor: pointer; 
padding-bottom: 25px; 
padding-left: 25px; 
padding-top: 25px; 
text-decoration: none; 
z-index: 0; 
background-color: red; /* just so you know where the button is */ 
} 

.icon-menu i { 
margin-right: 5px; 
} 

注：我知道，拨动具有b个在jQuery的新版本中已被弃用，但它是我发现的与我的问题相关的唯一解决方案。

Answer 1

在jquery 1.8中，toggle功能本身就像点击功能一样，所以你不需要单独的点击功能。

演示

http://jsfiddle.net/ue36sfcs/

代码

$('.icon-menu').toggle(
    function(){ 
     $('.menu').animate({ 
     left: "600px"}, 200); 
    }, 
    function(){ 
     $('.menu').animate({ 
     left: "0px"}, 200); 
    }); 

的jQuery版本1.8以上时，可以设置开机，关机标志

演示

个

http://jsfiddle.net/eae779xo/

代码

var on = "no" 
$(document).on("click", ".icon-menu", function(){  
    if (on == "no") { $('.menu').animate({ left: "600px"}, 200); 
on = "yes" 
} 
else { $('.menu').animate({ left: "0px"}, 200); 
on = "no" 
} 
})