jQuery切换仅适用于第二次点击后scrollTo事件

Question

我有一些移动导航，使用scrollTo函数，一旦点击，使我的切换功能只能在第二次点击。它可能必须执行scrollTo单击的绑定，但我无法弄清楚如何解决它。

HTML：

<div class="nav-bar"> 
    <ul class="nav"> 
     <li><a href="#section1">Section 1</a></li> 
     <li><a href="#section2">Section 2</a></li> 
     <li><a href="#section3">Section 3</a></li> 
    </ul> 
    <a class="nav-toggle">Menu</a> 
</div> 
<div class="section-wrap"> 
    <div id="section1" class="section">Section 1</div> 
    <div id="section2" class="section">Section 2</div> 
    <div id="section3" class="section">Section 3</div> 
</div> 

JS：

$('ul.nav a').bind('click',function(event){ 
    $('ul.nav a').removeClass('on'); 
    $(this).addClass('on'); 
    var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top - 30 
    }, 200, function() { 
     $('.nav-bar').removeClass('open'); 
    }); 
    event.preventDefault(); 
}); 

$('a.nav-toggle').toggle(function() { 
    $('.nav-bar').addClass('open'); 
}, function() { 
    $('.nav-bar').removeClass('open'); 
}); 

对这一问题的工作示例，请参阅本：http://jsfiddle.net/MhSKC/9/

Answer 1

在你生命的结束，您删除open类。然后在下一次单击菜单栏时，toggle函数会尝试再次删除open类，因为这是接下来需要执行的两个toggle函数中的一个。这里有一个略微重新设计的解决方案：

http://jsfiddle.net/P4mtC/

$('a.nav-toggle').click(function() { 
    $('.nav-bar').toggleClass('open'); 
}); 

Answer 2

，而不是使用

$('a.nav-toggle').toggle(function() { 
    $('.nav-bar').addClass('open'); 
}, function() { 
    $('.nav-bar').removeClass('open'); 
}); 

使用

$('a.nav-toggle').click(function() { 
    $('.nav-bar').toggleClass('open'); 
});