点击链接即可关闭汉堡菜单

Question

我创建了一个简单的汉堡菜单，当你点击其中一个链接时，我想关闭它，但我不知道如何做到这一点。我的HTML是：

<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 -->

我的jQuery是：

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

有什么简单的东西可以添加到jQuery中以使其工作吗？干杯

Answer 1

尝试使用引导下拉菜单，它具有内置的功能：http://getbootstrap.com/components/#dropdowns

示例：

<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>

无需js破解

Answer 2

您需要在列表项div中的链接上添加一个监听器，这样您就可以在单击其中任何一个时关闭div：

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