手机的基本jQuery切换菜单不起作用

Question

I have a very basic toggle menu using jQuery's on: tap which isn't working:

<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>

Then,

$(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-nav is a div which is 250px in width and is set to an absolute position with a left of -252px , which is then set to 0 when the image icon is tapped (making it slide into view). As you can see, once it slides out, it should remove the hidden class and add an active class. Then I set a custom tap function to slide it back and remove the active class and add hidden again. It will slide out, but not slide back. What am I doing wrong?

Answer 1

I think the issue is that you have multiple events triggered on your image click. Try something like this:

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

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

    $("#anchor header img").on("click", function() {
        $('#anchor').hasClass('active') ? left = '-=252px' : left = '+=252px';
        $("#mobile-nav, header").animate({'left': left}, speed);    
        $("#anchor").toggleClass("hidden active");
    });

});

Fiddle