Creating a menu for the Burger Menu

Question

Working on the burger menu still. Just wondering if anyone can see why this function doesn't work? The first bit works, but when it comes to adding more classes it doesn't.

jQuery(document).ready(function ($) {



let $navToggle = $("#navToggle"),
   $navContainer = $('#burgerNavContent'),
   $navMenu = $(".menu-burgernav-container");

/**
 * Open Nav if(!hasClass['active'])
 * else close Nav
 */

function toggleNav() {
    if (!$navToggle.hasClass('active')) {
        $navToggle.addClass('active');
        $navContainer.addClass('burgerMenuActive');
        $navMenu.addClass('burgerMenuLinkActive');
    } else {
        $navToggle.removeClass('active');
        $navMenu.removeClass('burgerMenuLinkActive');
        $navContainer.removeClass('burgerMenuActive');
        return false;
    }
    toggleNav();
}


    $navToggle.click(function () {
        toggleNav();
        return false;
    });

});

I've tried adding a snippet but it isn't letting me. Basically the addClass on the $navToggle works but it doesn't want to listen to $navContainer or $navMenu

probably `let` is the issue i guess. [see here](https://stackoverflow.com/a/11444416/2996989) — Ahmed Sunny, Mar 06 '18 at 14:42
Doesn't want to work at all with var. Well it understands the click and selector just doesn't add anything to the divs. Google Dev Tools highlights the right selectors. — sam ryan, Mar 06 '18 at 14:46
and add return after if condition first case. it will work. because your code first add active and then remove it because of function call at the end — Ahmed Sunny, Mar 06 '18 at 14:54
Getting marked down because I'm learning. Yay! Can't ask another question... — sam ryan, Mar 07 '18 at 09:19
No you were marked down due to the question only including half the code. It would help to also see the HTML and CSS associated with this JS, as they could be causing issues too. Also 'it doesn't work' is a useless statement. Please describe what you expect to happen, and what is happening — Rory McCrossan, Mar 16 '18 at 10:23

score 1 · Answer 1 · answered Mar 06 '18 at 14:59

it adds active class and goes out of IF condition and run again

toggleNav()

which check class of $navToggle which now have active so it removes it

function toggleNav() {
if (!$navToggle.hasClass('active')) {
    $navToggle.addClass('active');
    $navContainer.addClass('burgerMenuActive');
    $navMenu.addClass('burgerMenuLinkActive');
    return true;
} else {
    $navToggle.removeClass('active');
    $navMenu.removeClass('burgerMenuLinkActive');
    $navContainer.removeClass('burgerMenuActive');
    return false;
}
toggleNav(); // either remove this , idk why you are calling it
}

Creating a menu for the Burger Menu

1 Answers1