如何将标签 div 更改为标签按钮以激活具有 js 功能的菜单？

Question

我点击 div 标签时会出现一个侧边菜单。一切正常。但是我想将 <div id="togglek"></div> 更改为 <button id="togglek" onclick"MyFunction()"></button> 我试过了，但是使用按钮标签没有出现菜单。

有什么办法可以把div改成按钮吗？我确定脚本需要稍微更改，但我不知道如何更改。抱歉，我是新手，正在努力学习。

感谢任何回复，谢谢。

    const togglek = document.getElementById('togglek');
    const sidenav = document.getElementById('sidenav');
    
    document.onclick = function(e){
        if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
          togglek.classList.remove('btnactv');
          sidenav.classList.remove('active');
          overlay.classList.remove('bgover');
        }
    }
    
    togglek.onclick = function(){
        togglek.classList.toggle('btnactv');
        sidenav.classList.toggle('active');
        overlay.classList.toggle('bgover');
    }

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

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

/*Toggle Button*/
#togglek {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    font-size: 18px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid black;
    
}

#togglek::before {
    font-family: fontAwesome;
    content:'Open';
    color: #000;
}

#togglek.btnactv::before {
    font-family: fontAwesome;
    content:'Close';
    color: #000;
    z-index:1000;
}

/*Sidebar*/
.sidenav_box {
    margin-top: 5%;
    padding: 25px;
}

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    width: 80%;
    height: 100vh;
    background: #fbfbfb;
    transition: 0.3s;
    z-index: 1000;
}

#sidenav.active {
    left: 0px;
    width: 80%;
    background: #fbfbfb;
    box-shadow: 5px 0px 15px 0px #00000021;
}

/*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;
}

<div id="togglek"></div>

<div id="sidenav">
 <div class="sidenav_box"> 
 
    <div class="user_menu header">
        <span class="display name">Hello User</span>
        <span class="display mail">example@gmail.com</span>
    </div>   

     <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 id="overlay"></div>

Answer 1

您的问题似乎是您没有定义 myFunction 的函数，您只需将 div 更改为按钮并使用现有的 onclick 代码，它仍然工作如图所示：

    const togglek = document.getElementById('togglek');
    const sidenav = document.getElementById('sidenav');
    
    document.onclick = function(e){
        if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
          togglek.classList.remove('btnactv');
          sidenav.classList.remove('active');
          overlay.classList.remove('bgover');
        }
    }
    
    togglek.onclick = function(){
        togglek.classList.toggle('btnactv');
        sidenav.classList.toggle('active');
        overlay.classList.toggle('bgover');
    }

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

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

/*Toggle Button*/
#togglek {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    font-size: 18px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid black;
    
}

#togglek::before {
    font-family: fontAwesome;
    content:'Open';
    color: #000;
}

#togglek.btnactv::before {
    font-family: fontAwesome;
    content:'Close';
    color: #000;
    z-index:1000;
}

/*Sidebar*/
.sidenav_box {
    margin-top: 5%;
    padding: 25px;
}

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    width: 80%;
    height: 100vh;
    background: #fbfbfb;
    transition: 0.3s;
    z-index: 1000;
}

#sidenav.active {
    left: 0px;
    width: 80%;
    background: #fbfbfb;
    box-shadow: 5px 0px 15px 0px #00000021;
}

/*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;
}

<button id="togglek"/>

<div id="sidenav">
 <div class="sidenav_box"> 
 
    <div class="user_menu header">
        <span class="display name">Hello User</span>
        <span class="display mail">example@gmail.com</span>
    </div>   

     <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 id="overlay"></div>

Answer 2

你是这个意思吗？

  const togglek = document.getElementById('togglek');
    const sidenav = document.getElementById('sidenav');
    
    document.onclick = function(e){
        if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
          togglek.classList.remove('btnactv');
          sidenav.classList.remove('active');
          overlay.classList.remove('bgover');
        }
    }
    
    
    function pressToShow() {
        togglek.classList.toggle('btnactv');
        sidenav.classList.toggle('active');
        overlay.classList.toggle('bgover');
    }

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

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

/*Toggle Button*/
#togglek {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    font-size: 18px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid black;
    
}


/*Sidebar*/
.sidenav_box {
    margin-top: 5%;
    padding: 25px;
}

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    width: 80%;
    height: 100vh;
    background: #fbfbfb;
    transition: 0.3s;
    z-index: 1000;
}

#sidenav.active {
    left: 0px;
    width: 80%;
    background: #fbfbfb;
    box-shadow: 5px 0px 15px 0px #00000021;
}

/*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;
}

<button id="togglek" onclick=pressToShow()>PRESS TO SHOW</div>

<div id="sidenav">
 <div class="sidenav_box"> 
 
    <div class="user_menu header">
        <span class="display name">Hello User</span>
        <span class="display mail">example@gmail.com</span>
    </div>   

     <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 id="overlay"></div>

Answer 3

似乎对我有用。这是 jsfiddle

在html我刚改了

<div id="togglek"></div>

至

<button id="togglek" onclick="MyFunction()"></button>

并且在 js:

togglek.onclick = function(){
    togglek.classList.toggle('btnactv');
    sidenav.classList.toggle('active');
    overlay.classList.toggle('bgover');
}

至

function MyFunction() {
    togglek.classList.toggle('btnactv');
    sidenav.classList.toggle('active');
    overlay.classList.toggle('bgover');
}

如何将标签 div 更改为标签按钮以激活具有 js 功能的菜单？

How can I change tag div to tag button to activate menu with js function?

html

javascript

css

menu

button