如何使用我的移动菜单栏 'display : none' 'display : block'

Question

我有一个导航菜单，当断点为 640px 并出现一个图标时，它会消失。当我点击这个图标时，我的菜单会重新打开但不会关闭，当我调整浏览器大小时它也不会恢复到正常样式。确定某事在我的 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>

Answer 1

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

如何使用我的移动菜单栏 'display : none' 'display : block'

How to make work my mobile menu bar 'display : none' 'display : block'

javascript

mobile

menu