如何使我的移动菜单栏“显示：无”“显示：阻止”工作

如何解决如何使我的移动菜单栏“显示：无”“显示：阻止”工作

我有一个导航菜单，当断点为 640 像素并出现一个图标时，它会消失。当我单击此图标时，我的菜单会重新打开并且不会关闭，并且当我调整浏览器大小时，它不会恢复到正常样式。当然，某些东西在我的 if 语句中不起作用。

感谢您的帮助！

document.body.addEventListener('click',function (e) {
  if (e.target.matches('.fa-grip-lines')) { 
    let elem = document.querySelector('#menuMobile');
    if (menuMobile.style.display === 'none'&& window.innerWidth < '640') {
      elem.classList.remove("menuMobile");
      elem.classList.add("mobile");
      sousMenu();
    } 
    else if (window.innerWidth > '640' ) {
    elem.style.display = 'block';
    } 
    else
    { 
      elem.style.display = 'none';
      elem.classList.remove("mobile");
      elem.classList.add("menuMobile");
      
    }
  }
}
);

.menuMobile {
      margin-top: 10%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 35%;
      height: 62%;
      @media only screen and (max-width: $sm) {
        display: none;
        width: 0%;
        background-color: black;
        position: absolute;
      }
    }
    .mobile{
      display : block!important;
      position : absolute;
      width: 100%;
      height : 140%;
      z-index: 900;
      // top : -10%;
      padding : 25% 10% 10% 20%;
      margin-left: 0%;
      margin-right: 0%;
      background-color: black;
      
    }

<div class="sous-menu-burger">

        <i class="fas fa-grip-lines"></i>

    </div> 

    <div class="cont-main">

        <div id="menuMobile" class="menuMobile"> 

                <a href="#"><div class="home-a">Home</div></a>

                <a href="#"><div class="about-a">About</div></a>

                <a href="#"><div class="skills-a">Skills</div></a>

                <a href="#"><div class="projects-a">Projects</div></a>

                <a href="#"><div class="contacts-a">Contacts</div></a>

        </div>

解决方法

尝试将 else if 语句从 else if (window.innerWidth > '640' ) { 更改为 :else if (menuMobile.style.display != 'block'&& window.innerWidth > '640' ) {