Javascript Toggle Problem

Hello everyone,

I seem to be having a problem with my menu toggle code where when I click the element then click elsewhere to hide it and go back to click the menu icon to show it, it will sometimes take multiple clicks to show it.

function showNav() {
    let navToggle = document.querySelector('#js-nav-toggle');
    let navMenu = document.querySelector('.Nav__menu');

    navToggle.addEventListener('click', () => {
        navMenu.classList.add('visible');
    });

    hideOnClickOutside(navToggle);

    // Handle outside clicks
    function hideOnClickOutside(element) {
        document.addEventListener('click', function (e) {
            if(e.target.id != 'js-nav-toggle') {
                element.nextElementSibling.classList.remove('visible');
            }
        });
    }

    document.removeEventListener('click', hideOnClickOutside);
}

artcore

6 years ago

Level 5

Always try to have 1 action in a function and trigger 1 action/function based on a condition

function showNav() - toggle 'hidden' class for example

function hideNav()

document.addEventListener('click', e => {

    const target = e.target.
    if(target.classList.contains('...something menu'))
        ...showNav()

    else
        ...hideNav()
    
});

The show/hide functions are not in the event listener but outside.

Please or to participate in this conversation.