j查询幻灯片隐藏菜单从左到右无法配置 JS

Question

所以我已经在这方面工作了一段时间，我已经尝试了很多例子在这里找到stackoverflow，然后开始阅读在js/jquery的大部分时间，但我仍然有这个问题。

基本上，我能够创建一个隐藏菜单项，当点击时滑动到屏幕上，我能够通过切换类来改变用于打开的按钮，并将其发送回来。

但是在第一次通过这个过程之后，当我试图再次打开它时，它会自动打开然后关闭。

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

小提琴:http://jsfiddle.net/VpnrV/1/

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

code - 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;
}

my laughing js:

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

任何帮助都非常感谢!

Answer 1

每次单击按钮时，实际上都将类.close绑定到多个回调。

你可以试试:

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

在animate()前面设置stop()将取消当前动画并执行下一个动画，而不会将多个动画排队。

Answer 2

您实际上可以在一次单击事件中做到这一点。它所做的就是每次你点击打开它寻找关闭类，如果有，关闭菜单，如果没有打开它。然后切换close类:

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

我不知道这是否是最有效的，但它适用于你的例子。我也更新了:http://jsfiddle.net/VpnrV/3/