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

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

2 个答案: