Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Evan Fraser
Evan Fraser
6,789 Points

JavaScript open/close submenu help!

In my custom wordpress theme on this site I created: http://perfectpergola.com/ the submenu/dropdown menu in the header on mobile devices opens fine when i click, but i cant figure out how to get it to close on click, super frustrating, any ideas?

Heads up, i know barely anything about js...

Here is the js for the menu

(function() {

    var nav = document.getElementById('site-navigation'),
        button, menu;
    if (!nav) {
        return;
    }

    button = nav.getElementsByTagName('button')[0];
    menu = nav.getElementsByTagName('ul')[0];

    if (!button) {
        return;
    }

    // Hide button if menu is missing or empty.
    if (!menu || !menu.childNodes.length) {
        button.style.display = 'none';
        return;
    }

    button.onclick = function() {
        if (-1 === menu.className.indexOf('nav-menu')) {
            menu.className = 'nav-menu';
        }
        if (-1 !== button.className.indexOf('toggled-on')) {
            button.className = button.className.replace(' toggled-on', '');
            menu.className = menu.className.replace(' toggled-on', '');
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
})(jQuery);

jQuery(document).ready(function() {
    jQuery('#site-navigation .menu-item-has-children > a').click(function(e) {
        e.preventDefault();
        if (jQuery(this).parent().children('.sub-menu:first').is(':hidden')) {
            jQuery(this).parent().children('.sub-menu:first').show(200);
        } else {
            if (jQuery(this).parent().children('.sub-menu:first').show(200));
        }
    });
});

1 Answer

Martin Zarate
Martin Zarate
10,723 Points

In the 'if' part of the statement you check if it is 'hiden' if it is then show it. However, in the 'else' part of the statement you are showing it again, so your code never hides it, only shows it. Simple fix: change show() to hide() in the else block:

if (jQuery(this).parent().children('.sub-menu:first').is(':hidden')) {
    jQuery(this).parent().children('.sub-menu:first').show(200);
} else {
    if (jQuery(this).parent().children('.sub-menu:first').hide(200));
}

Also to note, jQuery has a 'toggle()' function that could refactor this code to one line of code:

jQuery(this).parent().children('.sub-menu:first').toggle(200);

Further resources:

https://www.w3schools.com/jquery/eff_toggle.asp

Cheers.