0

scrollTo 関数を使用するモバイル ナビゲーションがいくつかあります。一度クリックすると、トグル関数は 2 回目のクリックでのみ機能します。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/を参照してください。

4

2 に答える 2

1

アニメーションの最後で、openクラスを削除します。メニュー バーを次にクリックすると、関数はクラスを再度toggle削除しようとします。これは、次に実行する必要がある 2 つの関数のうちの 1 つであるためです。少し作り直したソリューションを次に示します。opentoggle

http://jsfiddle.net/P4mtC/

$('a.nav-toggle').click(function() {
    $('.nav-bar').toggleClass('open');
});
于 2013-08-29T00:27:42.317 に答える