JavaScript-菜單在頁面加載時打開

Question

下午好

我正在網站上使用帶有鈴聲的菜單，但是此菜單在網站加載時打開。 我試圖用javascript切換代碼，但沒有成功。 僅在單擊按鈕時才能打開菜單。

我將所有菜單代碼（CSS）留在此處，以使查找問題更容易。

（對不起，我的英語不好）謝謝您。

 toggle = document.querySelectorAll(".toggle")[0]; nav = document.querySelectorAll("nav")[0]; toggle_open_text = '☰'; toggle_close_text = '✖'; nav.classList.toggle('open'); toggle.addEventListener('click', function() { nav.classList.toggle('open'); if (nav.classList.contains('open')) { toggle.innerHTML = toggle_close_text; } else { toggle.innerHTML = toggle_open_text; } }, false); setTimeout(function(){ nav.classList.toggle('open'); }, 800); 

 @import url("https://fonts.googleapis.com/css?family=Titillium+Web"); /*html, body { height: 100%; } body { background: beige; font-family: Alegreya Sans, sans-serif; } */ nav { display: block; position: fixed; width: 500px; height: 500px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translate3d(25px, -25px, 0); transform: translate3d(25px, -25px, 0); transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); } nav.open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } nav.top-right { top: -140px; right: -140px; } .disc { position: absolute; display: inline-block; text-align: center; cursor: pointer; font: 25px Titillium Web, sans-serif; line-height: 40px; padding-top: 10px; border-radius: 250px; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg); transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg); pointer-events: none; opacity: 0; cursor: pointer; transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s; transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); } .disc div { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .open .disc { pointer-events: auto; opacity: 1; } .l1 { top: 0px; left: 0px; right: 0px; bottom: 0px; background: #627ca9; transition-delay: 0s; } .open .l1 { transition-delay: 0s; -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); opacity: 1; } .open .l1:hover { background: shade(#627ca9, 90%); color: #627ca9; transition-delay: 0s; } .open .l1:active { background: shade(#627ca9, 50%); color: #627ca9; } .open .l1.toggle { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); } .l2 { top: 50px; left: 50px; right: 50px; bottom: 50px; background: #627ca9; transition-delay: 0.1s; } .open .l2 { transition-delay: 0.1s; -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); opacity: 1; } .open .l2:hover { background: shade(#627ca9, 90%); color: #627ca9; transition-delay: 0s; } .open .l2:active { background: shade(#627ca9, 50%); color: #627ca9; } .open .l2.toggle { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); } .l3 { top: 100px; left: 100px; right: 100px; bottom: 100px; background: #627ca9; transition-delay: 0.2s; } .open .l3 { transition-delay: 0.2s; -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); opacity: 1; } .open .l3:hover { background: shade(#627ca9, 90%); color: #627ca9; transition-delay: 0s; } .open .l3:active { background: shade(#627ca9, 50%); color: #627ca9; } .open .l3.toggle { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); } .l4 { top: 150px; left: 150px; right: 150px; bottom: 150px; background: #627ca9; transition-delay: 0.3s; } .open .l4 { transition-delay: 0.3s; -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); opacity: 1; } .open .l4:hover { background: shade(#627ca9, 90%); color: #627ca9; transition-delay: 0s; } .open .l4:active { background: shade(#627ca9, 50%); color: #627ca9; } .open .l4.toggle { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); } .l5 { top: 200px; left: 200px; right: 200px; bottom: 200px; background: #627ca9; transition-delay: 0.4s; } .open .l5 { transition-delay: 0.4s; -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg); opacity: 1; } .open .l5:hover { background: shade(#627ca9, 90%); color: #627ca9; transition-delay: 0s; } .open .l5:active { background: shade(#627ca9, 50%); color: #627ca9; } .open .l5.toggle { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); } .toggle { line-height: 100px; padding: 0; width: 100px; background: #627ca9; opacity: 1; -webkit-transform: none; transform: none; pointer-events: auto; transition-delay: 0s; } .open .toggle { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } .toggle:hover { background: shade(#627ca9, 90%); color: #627ca9; } .toggle:active { background: shade(#627ca9, 50%); color: rgba(255, 215, 0, 0.5); -webkit-transform: scale(0.9); transform: scale(0.9); transition-duration: 0s; } 

 <nav style="opacity:0.9;" class="top-right open"> <a style="color:#FFFFFF" href="index.html" class="disc l1"> <div>#ROCKON</div> </a> <a style="color:#FFFFFF" href="player-hd/top10.html" class="disc l2"> <div>VOTE</div> </a> <a style="color:#FFFFFF" href="player-hd/podcasts.html" class="disc l3"> <div>PODCASTS</div> </a> <a style="color:#FFFFFF" href="player-hd/listen.html" class="disc l4"> <div>LIVE</div> </a> <a style="color:#FFFFFF; font-size: 30px;" class="disc l5 toggle"> &#9776; </a> </nav> 

Answer 1

只需將其刪除：

setTimeout(function(){
    nav.classList.toggle('open');   
}, 800);

Answer 2

問題是您正在添加帶有setTimeout的類.open 。

刪除該setTimeout ，你會沒事的