toggle - jQuery 切换仅适用于 scrollTo 事件后的第二次单击

Question

我有一些使用 scrollTo 功能的移动导航，一旦点击，我的切换功能只在第二次点击时起作用。它可能需要绑定scrollTo click，但我不知道如何修复它。

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