JS，菜單按鈕工作，外部鏈接不
[英]JS, Menu button works, external link doesnt
問題描述
function transition() { var divtran = document.getElementById('mobile_menu'); if (divtran.style.height == '100vh') divtran.style.height = '0vh' else divtran.style.height = '100vh' }
/*mobile Menu */ .mobilemenu{ z-index: 21; margin-top: -80px; margin-right: -7px; position:relative; width:50px; height:40px; border: 0px; -webkit-transition:background .3s; transition:background .3s } .mobilemenu span{ height:-2px; top:20px; left:10px; right:10px; position:absolute; } .mobilemenu span::after,.mobilemenu span::before{ position:absolute; left:0; height: 3px; width:100%; border-radius: 50px; background-color: #232323; content:""; } .mobilemenu_transition { background-color: transparent; } /*transition code persec*/ .mobilemenu_transition span{ -webkit-transition:background 0s .3s; transition:background 0s .3s; } .mobilemenu_transition span::after,.mobilemenu_transition span::before{ -webkit-transition-duration:.3s,.3s; transition-duration:.3s,.3s; -webkit-transition-delay:.3s,0s; transition-delay:.3s,0s; } .mobilemenu_transition span::before{ -webkit-transition-property:top,-webkit-transform; transition-property:top,transform; } .mobilemenu_transition span::after{ -webkit-transition-property:bottom,-webkit-transform; transition-property:bottom,transform; } .mobilemenu_transition.act{ background-color: transparent; } .mobilemenu_transition.act span::before{ -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } .mobilemenu_transition.act span::after{ -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } #mobile_menu { width: 100%; height: 0vh; position: absolute; z-index: 18; background-color: orange; overflow: hidden; position: fixed; background-color: #f3f3f3; -webkit-transition-duration:.3s,.3s; transition-duration:.3s,.3s; -webkit-transition-delay:.3s,0s; transition-delay:.3s,0s; }
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="mobile_menu"> <br /><br /><br /><a href="#" onclick="transition()">bottom</a> </div> <a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button> </div></a> <script> (function() { "use strict"; var toggles = document.querySelectorAll(".mobilemenu"); for (var i = toggles.length - 1; i >= 0; i--) { var toggle = toggles[i]; toggleHandler(toggle); }; function toggleHandler(toggle) { toggle.addEventListener( "click", function(e) { e.preventDefault(); (this.classList.contains("act") === true) ? this.classList.remove("act") : this.classList.add("act"); }); } })(); </script> </body> </html>
https://github.com/Arxhtects/Css_menu_onepage
上面鏈接到菜單代碼。 我似乎無法弄清楚如何獲得一個外部鏈接，不僅關閉單擊該行后出現的菜單div，還刪除菜單類“act”，以便動畫恢復到其原始狀態。
獲取外部鏈接以關閉出現的菜單div很容易。 但我似乎無法刪除菜單按鈕所做的“行為”類。
所以基本上它一旦你點擊鏈接就離開了X. 我很感激任何幫助。 先感謝您 ：）
對不起，如果我模糊，但任何人都可以幫忙嗎？
1 個解決方案
解決方案1
0 已采納 2017-02-14 07:31:06
function transition() { var divtran = document.getElementById('mobile_menu'); var mobileMenu = document.querySelectorAll(".mobilemenu"); var menuOpen = false; if (divtran.style.height == '100vh') { divtran.style.height = '0vh'; menuOpen = false; } else { divtran.style.height = '100vh' menuOpen = true; } for(var i=0;i<mobileMenu.length;i++){ if(menuOpen) { mobileMenu[i].classList.add("act"); } else { mobileMenu[i].classList.remove("act"); } } }
/*mobile Menu */ .mobilemenu{ z-index: 21; margin-top: -80px; margin-right: -7px; position:relative; width:50px; height:40px; border: 0px; -webkit-transition:background .3s; transition:background .3s } .mobilemenu span{ height:-2px; top:20px; left:10px; right:10px; position:absolute; } .mobilemenu span::after,.mobilemenu span::before{ position:absolute; left:0; height: 3px; width:100%; border-radius: 50px; background-color: #232323; content:""; } .mobilemenu_transition { background-color: transparent; } /*transition code persec*/ .mobilemenu_transition span{ -webkit-transition:background 0s .3s; transition:background 0s .3s; } .mobilemenu_transition span::after,.mobilemenu_transition span::before{ -webkit-transition-duration:.3s,.3s; transition-duration:.3s,.3s; -webkit-transition-delay:.3s,0s; transition-delay:.3s,0s; } .mobilemenu_transition span::before{ -webkit-transition-property:top,-webkit-transform; transition-property:top,transform; } .mobilemenu_transition span::after{ -webkit-transition-property:bottom,-webkit-transform; transition-property:bottom,transform; } .mobilemenu_transition.act{ background-color: transparent; } .mobilemenu_transition.act span::before{ -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } .mobilemenu_transition.act span::after{ -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } #mobile_menu { width: 100%; height: 0vh; position: absolute; z-index: 18; background-color: orange; overflow: hidden; position: fixed; background-color: #f3f3f3; -webkit-transition-duration:.3s,.3s; transition-duration:.3s,.3s; -webkit-transition-delay:.3s,0s; transition-delay:.3s,0s; }
<!DOCTYPE html> <html lang="en"> <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="mobile_menu"> <br /><br /><br /><a href="#" onclick="transition()">bottom</a> </div> <a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button> </div></a> </body> </html>
內部 js 工作正常，但外部沒有
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.