第一次单击后 NavBar 菜单列表不出现

Question

我有这段代码可以在移动设备上切换菜单，工作正常... 当我在菜单上单击一次时，他的工作很好，具有模糊效果和所有功能......但是如果我在图标菜单中单击多次，他会停止显示我的菜单列表，我的 navbarr__menu class...

我添加了一个功能，当用户点击navbarr__menuclass的外部（在.mainclass），菜单关闭...（工作的也是）

             <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>

javaScript 运行良好，但当我第二次单击菜单图标时，我仍然遇到此问题...

    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');
    }),

有谁知道为什么会这样？以及如何修复它？？

Answer 1

在 if 语句中可以尝试

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

第一次单击后 NavBar 菜单列表不出现

NavBar menu list does not appear after the first click

html

javascript

jquery

menu

toggle