CODEWITHSUNDEEP
javascriptjqueryhtmlioscss
Jace Cotton
Jace Cotton

Reputation: 2014

Basic jquery toggle menu for mobile not working

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?

Upvotes: 1

Views: 1424

Answers (1)

Chad
Chad

Reputation: 5408

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

Upvotes: 1

Related Questions