javascript - 如何使菜单栏像没有 Bootstrap 的正确菜单栏一样工作？

Question

菜单栏如何正确地使用以下功能的菜单栏:*点击汉堡包图标将显示导航链接。*点击导航链接将隐藏菜单栏。

(不使用 bootstrap，而是从头开始)

我知道很多人问过这个问题。我看过很多不同的解决方案，包括 JS 和 Jquery，我遇到了几个问题，因为我真的不完全理解 JS 或 Jquery。

这就是我的进展。 转到我的网站 hung.no 这样您就可以看到问题所在。在我的网站上，您应该最小化窗 Eloquent 能到达汉堡吧。然后你应该点击那个栏。之后单击其中一个导航链接。 它关闭了，但是当您尝试再次点击汉堡栏时，它不起作用。

//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;
	padding: 6px 3em;
	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”，但是当您再次点击时，流程移动到“else”，然后它删除了“responsive”，因此您正在删除该行为。

如果您删除该流程，则导航会正常工作。