Hamburger Menü zum Schließen bei Klick auf Links

Question

Ich habe ein einfaches Hamburger Menü erstellt, das ich schließen möchte, wenn Sie auf einen der Links klicken, aber ich weiß nicht, wie das geht. Mein HTML ist:

<nav> 

      <div class="nav_top"> 

       <div class="nav_logo"> 
        <img src="images/nav_logo.png"> 
       </div> <!-- end of nav_logo --> 

      </div> <!-- end of nav_top --> 

      <div class="hamburger" id="hamburger"> 
        <img src="images/hamburger.svg"> 
       </div>  

      <div class="list-items"> 
       <ul> 
        <li><a href="#welcome">WELCOME</a></li> 
        <li><a href="#venue">VENUE</a></li> 
        <li><a href="#accommodation">ACCOMMODATION</a></li> 
        <li><a href="#gifts">GIFTS</a></li> 
        <li><a href="#weekend">WEEKEND</a></li> 
        <li><a href="#RSVP">RSVP</a></li> 
       </ul> 
      </div> 

     </nav> <!-- end of navigation section --> 

Meine jQuery ist:

jQuery(function($){ 
     $('.hamburger').click(function(){ 
     $('.list-items').toggleClass('expand') 
     }) 
    }) 

Gibt es etwas, einfach ich zum jQuery dies zu umgehen hinzufügen können zu arbeiten? Prost

Answer 1

versuchen, eine Bootstrap-Drop-Down verwenden, hat es diese Funktionalität von Natur aus in gebaut: http://getbootstrap.com/components/#dropdowns

Beispiel:

<ul class="user-dropdown navbar-right"> 
    <li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
     <i class="fa fa-lg fa-navicon" title="Menu"></i> 
    </a> 
    <ul class="dropdown-menu"> 
     <li class="dropdown-header user-dropdown-header"> 
     Header 
     </li> 
     <li> 
     <a href="/index" class="link">All</a> 
     </li> 
     <li class="divider"></li> 
     <li> 
     <a href="/new" class="link">New</a> 
     </li> 
    </ul> 
    </li> 
</ul> 

keine js Hacks

erforderlich

Answer 2

Sie werden einen Listener hinzufügen müssen auf die Links in der Liste-Elemente div, so dass Sie die div schließen kann, wenn einer von ihnen angeklickt werden:

$('.list-items a').on("click", function(){ 
    $('.list-items').hide(); 
});