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'); 
});