为什么单击按钮时 Javascript 菜单只打开一次？

Question

我正在尝试构建一个在单击按钮时出现和消失的 sidenav。现在它工作了一半。当您单击该按钮时，它会打开，如果您再次单击它，它会关闭，但之后再也不会重新打开。

谁能帮我弄清楚我做错了什么？对不起，我是新手，我正在努力学习。到目前为止，我已经按照堆栈用户的建议得出了这个结果。

感谢任何回复，谢谢。

Ps：因为这只是一个测试，所以有一些类我没有使用，我将不得不删除它们。

    var menu = document.querySelector(".mob_menu_button");
      function mobile_menu(e) {
      
        e.stopPropagation(); 
        var x = document.getElementById("sidenav");
        if (!x.classList.contains("active")) {
          x.classList.add("active");
          menu.innerHTML = "<span>Close Menu<span>";
        } 
      }
      
      document.addEventListener("click", function (e) {
        var x = document.getElementById("sidenav");
        if (e.target.id !== "sidenav" && x.classList.contains("active")) {
          x.classList.add("hide");
          menu.innerHTML = "<span>Open menu</span>";
        }
      });

body {
  background: #686a81;
}

/*Overlay*/
#overlay {
    position: fixed;
    height: 100vh;
    top: 0;
    background: #000;
    z-index: 999;
}

#overlay.bgover {
  left: 0px;
  width: 100%;
  background: #000000d1;
}

/*Toggle Button*/
 .mob_menu_button {
       display: flex;
       align-content: center;
       justify-content: center;
       align-items: center;
       width: 100%;
       background: #282c33!important;
       font-weight: 500!important;
      }

/*Sidebar*/
.sidenav_box {
}

.menu {
  width: 70%;
  padding: 20px;
  background: #fbfbfb;
  box-shadow: 5px 0px 15px 0px #00000021;
  }

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    transition: 0.9s;
    z-index: 1000;
}

#sidenav.active {
    left: 0;
    width: 100%;
    background: #00000094; 
}

#sidenav.hide {
    left: -100%; 
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
   font-size: 15px;
   font-weight: 500;
   color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.user_menu.item:hover > a {
    color: #2e323a;
}

.mts_mob_container.active {
        display: flex;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        background: #000000d6;
        height: 100vh;
      }

<button onclick="mobile_menu(event)" class="mob_menu_button">Open menu</button>

<div id="sidenav">
 <div class="sidenav_box"> 
 
 <div class="menu">
 {%  if function( 'is_user_logged_in') %}
    <div class="user_menu header">
        <span class="display name">Ciao [display_name]</span>
        <span class="display mail">[display_email]</span>
    </div>   
 {% else %}
    <div>prov</div>
            
 {% endif %}
     <hr class="solid">  
     
    <div class="user_menu item">
        <a href="/account">
         <i class="icn_menu fa-regular fa-user"></i>
         <span class="link_text">Dashboard</span>
        </a>
    </div>
    
     <div class="user_menu item">
        <a href="ordini">
         <i class="icn_menu fa-regular fa-basket-shopping"></i>
         <span class="link_text">I miei ordini</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="libreria">
         <i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
         <span class="link_text">Downloads</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="impostazioni">
         <i class="icn_menu fa-regular fa-gear"></i>
         <span class="link_text">Impostazioni</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="wp-login.php?action=logout">
         <i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
         <span class="link_text">Logout</span>
        </a>
    </div>
    </div>
  </div>
</div>

Answer 1

您需要在

中添加x.classList.remove("active");而不是x.classList.add("hide");

 document.addEventListener("click", function (e) {
        var x = document.getElementById("sidenav");
        if (e.target.id !== "sidenav" && x.classList.contains("active")) {
          x.classList.add("hide");
          menu.innerHTML = "<span>Open menu</span>";
        }
});

为什么单击按钮时 Javascript 菜单只打开一次？

Why Javascript menu opens only once when you click on the button?

html

javascript

css

menu