'NavBar menu list does not appear after the first click

I have this code that toggle a menu on mobile devices, work just fine... When I click just one time at the menu, he work's nice, with the blur effect and all your functions... But if I click more than one time in the icon menu, he stop to show my menu-list, my navbarr__menu class...

I add a function to when the user click outside (in the .main class) of the navbarr__menu class, the menu close... (work's too)

             <ul class="navbarr__menu">
                <li class="navbarr__item">
                    <a href="#me" class="navbarr__links"><span>01.&nbsp;</span>About me </a>
                </li>
                <li class="navbarr__item">
                    <a href="#work" class="navbarr__links"><span>02.&nbsp;</span>Projects</a>
                </li>
                <li class="navbarr__item">
                    <a href="#contact" class="navbarr__links"><span>03.&nbsp;</span>Contact </a>
                </li>
                <li class="navbarr__item">
                    <a href="#resume" class="navbarr__links"><button type="button" id="resumeID" class="resume-btn" onclick="openResume()">Resume</button></a>
                </li>
            </ul>

The javaScript is working well, but I keep having this issue when i click for the second time at the menu icon...

    let menu = document.querySelector('#mobile-menu');
    let menuLinks = document.querySelector(".navbarr__menu");
    menu.addEventListener('click', function(){
        if(menu.classList.toggle('is-active')){
          $("section").addClass("main-blur");
          $('.main').click(function() {
            //Hide the menus if visible
            console.log("Entrei");
            $(".navbarr__menu").hide();
            $("section").removeClass("main-blur");
            $("#mobile-menu").removeClass("is-active");
            
          }),
          $('.main').click(function(event){
            event.stopPropagation();
            console.log("Sai");
            
        });          
        } else {
          $("section").removeClass("main-blur");
        }
        menuLinks.classList.toggle('active');
    }),

Does anyone know why is this happening? and how to fix it??

javascripthtmljquerymenutoggle


Solution 1:[1]

In the if statement maybe try

if(menu.classList.contains('is-active'))

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 PeteD

Related Questions