javascript - モバイル用の基本的なjqueryトグルメニューが機能しない

Question

jQueryを使用した非常に基本的なトグルメニューが機能しon: tapていません:

<nav id="mobile-nav">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        etc...
    </ul>
</nav>

<div id="anchor">
    <header>
        <img src="menu-icon.png">
    </header>
</div>

それで、

$(document).ready(function() {
    var speed = "fast";

    $("#anchor").addClass("hidden");

    $("#anchor.hidden header img").on("tap", function() {
        $("#mobile-nav").animate({
            left: "0px"
        }, speed);

        $("header").animate({
            left: "252px"
        }, speed);

        $("#anchor").removeClass("hidden");
        $("#anchor").addClass("active");
    });

    $("#anchor.active header img").on("tap", function() {
        $("#mobile-nav").animate({
            left: "-252px"
        }, speed);

        $("header").animate({
            left: "0"
        }, speed);

        $("#anchor").removeClass("active");
        $("#anchor").addClass("hidden");
    });

});

#mobile-nav250px内にある div であり、ofで にwidth設定されます。これは、画像アイコンがタップされたときに に設定されます (スライドして表示されます) 。ご覧のとおり、スライドアウトすると、クラスが削除され、クラスが追加されます。次に、カスタム関数を設定して、スライドさせてクラスを削除し、再度追加します。スライドアウトしますが、スライドバックしません。私は何を間違っていますか？absolute positionleft-252px0hiddenactivetapactivehidden