Question

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

（不使用bootstrap，但从头开始）

我知道很多人都问过这个问题。我已经看过许多不同的解决方案，使用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;
	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”，然后删除“响应”，以便删除该行为。

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

如何让菜单栏像没有引导程序的正确菜单栏一样工作？

1 个答案: