Schließen Hamburgeres Menü nach Klick-Ereignisse

Question

Ich habe ein Hamburger-Menü, das mit nur 1 Fehler ist fast abgeschlossen/Ausgabe, die ich nicht herausfinden kann. Mein Nav verweist auf verschiedene Bereiche auf der Startseite. Auf der Startseite kann der Benutzer also auf einen Navigationslink klicken, der ihn sofort zum gewünschten Ort auf der Seite bringt.

Mein Problem kommt, da es keine Belastung ist so, wenn der Benutzer klickt auf den Link nav sie an den Ort gebracht werden, aber im Dropdown-Menü nicht schließen. Ich habe versucht, .hide zum JS hinzuzufügen, das das Dropdown auf dem Klicken eines Links verbirgt, aber das mein neues Problem verursachte.

Nachdem der Benutzer klickt auf einen der nav Links sie das Menü versteckt sich aber das Menüsymbol wieder das Menü nicht öffnen auf klicken. In Dev-Tools sehe ich, dass beim Klicken auf einen der Nav-Links der Anzeigestil angezeigt wird: Keiner, so dass ich das Gefühl habe, dass das Problem dort liegen könnte. Vielen Dank für die Hilfe und lassen Sie mich wissen, wenn weitere Informationen benötigt werden!

HTML:

 <nav class="navbar navbar-light navbar-fixed-top"> 
    <div class="wrapping container-fluid"> 
     <div class="hamburger"> 
      <div class="line"></div> 
      <div class="line"></div> 
      <div class="line"></div> 
     </div> 
     <ul class="nav navbar-nav float-sm-right mr-0 menu"> 
     <li class="nav-item"> 
      <span class="sr-only"></span> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#workshops">Workshops</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#locations">Location</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link last-link" href="#register">Register</a> 
     </li> 
     </ul> 
     <a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a> 
    </div> 
    </nav> 

CSS für dieses Menü:

.menu{ 
    height: 0; 
    overflow: hidden; 
    transition: height 0.3s; 
} 

.open{ 
    height: 295px; 
} 

.hamburger { 
    cursor: pointer; 
    padding: 15px 10px 15px 0; 
    display: block; 
    float: right; 
    margin-top: 15px; 
} 

JS:

$('.hamburger').on('click', function() { 

$('.menu').toggleClass('open'); 

}); 

$('.menu a').on("click", function(){ 
$('.menu').hide(); 
}); 

Answer 1

Wenn Sie .toggleClass('open') verwenden werden das Menü zu öffnen, verwenden Sie es für Schließen Sie auch das Menü.

Generell aber, möchten Sie .addClass() und .removeClass() stattdessen verwenden:

$('.hamburger').on('click', function() { 
    $('.menu').addClass('open'); 
}); 

$('.menu a').on("click", function(){ 
    $('.menu').removeClass('open'); 
});