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 hacks

Answer 2

您需要在list-items div中的链接上添加一个侦听器，这样您可以在单击任何一个时关闭div：

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

点击链接后关闭汉堡菜单

2 个答案: