如何在沒有自舉的情況下使菜單欄像適當的菜單欄一樣工作？

Question

你怎麼菜單工作正確菜單欄功能： *點擊漢堡包圖標將顯示導航鏈接。 *點擊導航鏈接將隱藏菜單欄。

（，而無需使用引導，但從頭開始做）

據我瞭解，很多人問過這個問題。我看過很多不同的解決方案，使用JS和Jquery，而且我遇到了幾個問題，因爲我完全不瞭解JS或Jquery。

這是我得到了多少。去我的網站hung.no所以你可以看到問題。在我的網站上，你應該儘量減少窗口去漢堡酒吧。然後你應該點擊那個欄。之後，點擊其中一個導航鏈接。 它關閉，但當你嘗試再次點擊漢堡條，它不起作用。

//Navbar collapses to menubar 
 
function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
} 
 

 

 

 
//Jquery code ON MY WEBSITE. I cannot display it here. 
 
//This is the source 
 
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    
 
//$(document).ready(function(){ 
 
// $(".nav-link").click(function(){ 
 
//  $(".nav-toggle").hide(); 
 
// }); 
 
//}); 
 
//$(document).ready(function(){ 
 
// $(".nav-show").click(function(){ 
 
//  $(".nav-toggle").show(); 
 
// }); 
 
//});

/*mobile navbar*/ 
 

 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
.topnav { 
 
    overflow: hidden; 
 
    background-color: #fff; 
 
width: 100%; 
 
    position: fixed; 
 
    z-index: 1000; 
 
} 
 

 
.topnav a { 
 
    float: right; 
 
    display: block; 
 
    color: #000; 
 
    padding: 10px 10px; 
 
    text-decoration: none; 
 
    font-size: 12px; 
 
} 
 

 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 
    
 

 
@media screen and (max-width: 700px) { 
 
    .topnav a:not(:first-child) {display: none;} 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
    #myNavbar{ 
 
     display: none; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .topnav.responsive { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none!important; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
    .mob-font-size{ 
 
     font-size: 22px; 
 
     width: 100%; 
 
    } 
 
    .mob-logo-size{ 
 
    width: 177px; 
 
    height: 260px; 
 
    } 
 
} 
 
    
 

 
/*dekstop navbar*/ 
 

 
#myNavbar{ 
 
    position: fixed; 
 
    width: 100%; 
 
    background: white; 
 
    border-style: solid; 
 
    border-width: 0 0 1px 0; 
 
    border-color: #E8E8E8; 
 
    z-index: 9999; 
 
} 
 

 
.float-right-nav{ 
 
    padding: 8px 15px; 
 
    float: right; 
 
} 
 

 

 
#myNavbar ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 

 
div.container 
 
{ 
 
    margin: 0 auto; 
 
\t padding: 6px 3em; 
 
\t text-align: center; 
 
} 
 

 
div.container a 
 
{ 
 
    color: #000; 
 
    text-decoration: none; 
 
    font: 12px Raleway-medium; 
 
    margin: 0px 20px; 
 
    padding: 5px 5px; 
 
    position: relative; 
 
    z-index: 1; 
 
    cursor: pointer; 
 
}

<!--desktop navbar--> 
 
<div id="myNavbar"> 
 
    <div class="container"> 
 
<ul> 
 
    <li style="float:left"><a href="#home"><img src="svg/navlogo.svg" alt=""></a></li> 
 
    <li class="float-right-nav"><a href="#Kontakt"><span class="medium">KONTAKT</span></a></li> 
 
    <li class="float-right-nav"><a href="#Pris"><span class="medium">PRIS</span></a></li> 
 
    <li class="float-right-nav"><a href="#Garantier"><span class="medium">GARANTIER</span></a></li> 
 
    <li class="float-right-nav"><a href="#Ommeg"><span class="medium">OM MEG</span></a></li> 
 
</ul> 
 
    </div> 
 
</div> 
 

 

 
<!--Mobile navbar the classes nav-link and nav-toggle is used in the Jquery code located in the Javascript-section in this Code Snippet--> 
 

 
<div class="topnav" id="myTopnav"> 
 
<a style="float:left" href="#home"><img src="svg/navlogo.svg" alt="" height="20" width="18"></a> 
 
    <a class="nav-link nav-toggle"href="#Kontakt"><span class="medium">KONTAKT</span></a> 
 
    <a class="nav-link nav-toggle"href="#Pris"><span class="medium">PRIS</span></a> 
 
    <a class="nav-link nav-toggle"href="#Garantier"><span class="medium">GARANTIER</span></a> 
 
    <a class="nav-link nav-toggle"href="#Ommeg"><span class="medium">OM MEG</span></a> 
 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
 
</div>

Answer 1

我看到你的JavaScript函數「myFunction的」

當你點擊一個第一次，您將追加類「resposive」的問題，但是當你再次點擊流程轉移到「其他」，然後刪除「響應」，這樣你就可以消除這種行爲。

如果您刪除該流程，那麼導航工作正常。