為什么單擊按鈕時Javascript選單僅打開一次？

我正在嘗試構建一個在單擊按鈕時出現和消失的 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>

uj5u.com熱心網友回復：

你需要添加而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 html css 菜单

上一篇：為什么我的元素有一個滾動條，即使它適合它的容器？

下一篇：邊距不會通過父級的填充折疊