側面導航欄不會與 onclick 保持打開狀態。必須按住按鈕才能打開並保持打開狀態

Question

我試圖讓我的側面導航欄保持打開狀態 onclick function。

記者：

 <script>
let btn = document.querySelector("#btn");
let sidenav = document.querySelector(".sidenav");
    
btn.onclick = function(){
    sidenav.className.toggle("active");
    
}
</script>

這是有效的，除了 class 不會保持活動狀態。 一旦我松開我的鼠標，切換就會消失，導航欄會回到壓縮狀態。

HTML

<div class="sidenav">
        <div class="logo_content">
            <div class="logo">
                <i class='bx bx-book-bookmark'></i>
                <div class="logoName">Company Title</div>
            </div>
            <i class='bx bx-menu' id="btn"></i>
        </div>

這里是加寬導航周邊的CSS

.sidenav{
    position: fixed;
    top: 0;
    left:0;
    height: 100%;
    width: 78px;
    box-shadow: -1px -2px 30px black;
    padding: 6px 14px;
    border: 4px white solid;
    border-radius: 20px;
    transition: all 1s ease;
}
.sidenav:active{
    width: 240px;
    
}

Answer 1

你不能真正切換偽 class 例如:active或:hover 。 您可以為其添加另一個 class，就像下面代碼段中的sidenav-active一樣。 className也沒有這樣的 function toggle 。 您可以改為切換classList 。 例如：

elem.classList.toggle()

工作示例：

 let btn = document.querySelector("#btn"); let sidenav = document.querySelector(".sidenav"); btn.addEventListener('click', function(e){ sidenav.classList.toggle("sidenav-active"); if(sidenav.classList.contains("sidenav-active")){ btn.innerText = "Shrink"; } else btn.innerText = "Expand"; });

 .sidenav{ position: fixed; top: 0; left:0; height: 100%; width: 78px; box-shadow: -1px -2px 30px black; padding: 6px 14px; border: 4px white solid; border-radius: 20px; transition: all 1s ease; }.sidenav-active{ width: 240px; }

 <div class="sidenav"> <div class="logo_content"> <div class="logo"> <i class='bx bx-book-bookmark'></i> <div class="logoName">Company Title</div> </div> <button id="btn">Expand</button> </div> </div>

Answer 2

只需創建一個 class .active就可以使用object.classList.toggle("active")

片段

 let btn = document.querySelectorAll("[toggleMenu]"); let sidenav = document.querySelector(".sidenav"); for(var x=0; x < btn.length; x++){ btn[x].onclick = function(){ sidenav.classList.toggle("active"); if(sidenav.classList.contains("active")){ this.innerHTML = "Collspand"; } else{ this.innerHTML = "Expand"; } } }

 .sidenav{ position: fixed; top: 0; left:0; width: 78px; height: 100%; box-shadow: -1px -2px 30px black; padding: 6px 14px; border: 4px white solid; border-radius: 20px; transition: all 1s ease; background:#fff; }.sidenav.active{ width: 240px; }

 <div class="sidenav"> <div class="logo_content"> <div class="logo"> <i class='bx bx-book-bookmark'></i> <div class="logoName">Company Title</div> </div> <br> <button toggleMenu>Expand</button> </div> </div> <div class="body"> </div>