javascript - jquery从左边滑动隐藏菜单无法配置js

Question

所以我已经为此工作了一段时间，我已经尝试了很多在 stackoverflow 上找到的示例，然后开始在一天的大部分时间阅读 js/jquery，但我仍然遇到了这个问题。

基本上，我能够创建一个隐藏的菜单项，单击时它会滑到屏幕上，并且我能够通过切换类来更改用于打开的按钮，然后将其发回。

但是在我尝试再次打开它时第一次完成该过程后，它会打开然后自动关闭。

我构建了一个 jsfiddle，但做错了，因为它的工作方式与我网站上的不一样。

fiddle :http://jsfiddle.net/VpnrV/1/

网站:http://ericbrockmanwebsites.com/dev4/

代码 - html:

<div id="dashboard">
    <nav id="access">
        <div class="open"></div>Here's a bunch of content representing the nav bar.
    </nav>
</div> <!-- dashboard --> 

CSS:

#dashboard {
  font-size:30px;
  float:left;
  position: absolute;
  right: -653px;
  z-index: 100;
}

#access {
    display: block;
    float: right;
    margin: 10px auto 0;
    width:730px;
}

.open {
  background: #cabd32 url(images/open.png) top left no-repeat;
  float:left;
  padding:13px 30px 16px;
}

.close {
  background: #cabd32 url(images/close.png) top left no-repeat;
  float:left;
  padding:13px 30px 16px;
}

我可笑的js:

$(document).ready(function() {  
    $('.open').click(function() {
        $('#dashboard').animate({ right: '0' });
            $(this).toggleClass('close'); 
            $('.close').click(function() {
            $('#dashboard').animate({right: '-653'});
         }
  );
 });

非常感谢任何帮助!

Answer 1

每次单击按钮时，您实际上是在将类 .close 绑定(bind)到多个回调。

你可以试试这个:

$('.open').bind('click',function(){ 
    $('#dashboard').stop().animate(
    {
        right: $(this).hasClass('close') ? '-653px' : '-400px'
    });
    $(this).toggleClass('close');
});

在 animate() 之前使用 stop() 将取消当前动画并执行下一个动画，而无需排队多个动画。