顯示/隱藏是否使用純JavaScript

Question

我寫了一個腳本，向我隱藏/顯示sidenav。 我的問題是我想擁有所有功能。 首先，被檢查的衛星導航是否被隱藏。 如果隱藏，請單擊顯示的sidenav，如果可見，請單擊以隱藏sidenav。 我的代碼：

function showSideNav () {
    var sideNav = document.getElementById("slide-out");

    sideNav.style.cssText = "transform: translateX(0); -webkit-transition: 0.5s;";
}

function closeSideNav () {
    var sideNav = document.getElementById("slide-out");

    sideNav.style.cssText = "transform: translateX(-100%); -webkit-transition: 0.5s;";
}

Answer 1

您可以實現一個boolean變量，該變量可以保存sidenav是否可見以及根據其值顯示或隱藏信息的信息。

 var sideNav = document.getElementById("slide-out"), sideNavVisible = true; function toggleSideNav() { if (sideNavVisible) { sideNav.style.cssText = "transform: translateX(-100%); -webkit-transition: 0.5s;"; } else { sideNav.style.cssText = "transform: translateX(0); -webkit-transition: 0.5s;"; } sideNavVisible = !sideNavVisible; } 

 * { padding: 0; margin: 0; } #slide-out { height: 100px; width: 100px; background: blue; position: absolute; } .container { height: 100vh; width: 100vw } .x { right: 0; position: fixed; } 

 <div id='slide-out'></div> <button onclick="toggleSideNav()" class='x'>Toggle sidenav</button> <div class='container' onclick='sideNavVisible = true;toggleSideNav()'></div> 

Answer 2

我認為，如果將CSS放在帶有類的樣式表中，然后在JS中切換這些類，則管理起來會更容易：

 function toggleSideNav () { var sideNav = document.getElementById("slide-out"); sideNav.classList.toggle("hidden"); sideNav.classList.toggle("visible"); } // button for demo purposes: document.querySelector("button").addEventListener("click", toggleSideNav); 

 .visible { transform: translateX(0); -webkit-transition: 0.5s; } .hidden { transform: translateX(-100%); -webkit-transition: 0.5s; } 

 <button>Toggle</button> <div id="slide-out" class="visible">This is my test sliding div.</div>