单击菜单链接后关闭菜单答案

【问题标题】：Close menu after clicking the menu link单击菜单链接后关闭菜单
【发布时间】：2017-04-21 23:59:22
【问题描述】：

当您单击菜单链接 (http://prntscr.com/ez69fm) 时，它会转到该部分，但菜单仍处于打开状态。 我需要 - 单击菜单链接后它应该关闭。

<div class="col-md-7">
    <div id="overlay"></div>
    <div class="super-container">
        <div class="slide-container">
            <div class="stripe toggle-nav js-nav">
                <span><a href="#" class="header-lang">ENG</a></span>
                <div class="hamburger-box">                         
                    <!-- <span>Menu</span> -->
                    <div class="bun top"></div>
                    <div class="meat"></div>
                    <div class="bun bottom"></div>
                </div>
            </div>
            <div class="nav-wrap">
                <nav class="menu">
                    <ul>
                        <li><a href="#section0">HOME</a></li>
                        <li><a href="#section1">BRANDING + ID VISUAL</a></li>
                        <li><a href="#section2">PRODUTOS DIGITAIS</a></li>
                        <li><a href="#section3">EXPERIÊNCIA DE MARCA</a></li>
                        <li><a href="#section4">MATERIAL GRÁFICO</a></li>
                        <li><a href="#section5">CONTATO</a></li>
                        <li><a href="#section6">MINDSET NOAR</a></li>
                        <li><a href="#">ENGLISH</a></li>
                        <li class="social-li">
                            <a href="https://www.instagram.com/estanoar"><i class="fa fa-instagram"></i></a>
                            <a href="https://www.behance.net/ESTANOAR"><i class="fa fa-behance"></i></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div> <!-- end super-container -->
</div>

我在下面的 JS 代码中使用了菜单打开/关闭

  var burger = $(".hamburger-box");
  var overlay = $("#overlay");

  burger.on("click", function (e) {
    $(this).toggleClass("active");
    $('.js-nav').parent().find('.menu').toggleClass('active');
    overlay.toggle();
  });

我尝试了一些 jQuery click 功能并遵循了一些 StackOverFlow 旧问题，但我仍然无法弄清楚。

有人可以帮我吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

你需要给链接分配点击事件，让链接触发关闭按钮。

$('.menu ul li a').on("click", function (e) {
  burger.click();
});

【讨论】：

小心在其他元素上触发事件。该按钮可能具有其他一些可能导致意外行为的绑定。

【解决方案2】：

与按下汉堡按钮时的切换方式相同。代码需要在函数上，为DRY

var toggleMenu = function () {
  var burger = $(".hamburger-box");
  var overlay = $("#overlay");
  var menu = $('.js-nav').parent().find('.menu');

  burger.toggleClass("active");
  menu.toggleClass('active');
  overlay.toggle();
}

$(".hamburger-box, .js-nav a").on("click", toggleMenu);

重要的部分是$(".hamburger-box, .js-nav a")，您还将事件绑定到菜单的链接，因此菜单会关闭。

【讨论】：

【解决方案3】：

我用过它，它正在工作:)

$('.menu ul li a').on("click", function (e) {
    burger.click().removeClass("active");
});

感谢大家的宝贵意见。

【讨论】：

【解决方案4】：

试试这样的：

var burger = ".hamburger-box",
    overlay = "#overlay",
    menu = ".menu",
    menuLink = menu + " a";

function toogleMenu(){
  $(burger).toggleClass("active");
  $(menu).toggleClass('active');
  $(overlay).toggle();
}

$(burger + ', ' + menuLink).click(toogleMenu);

【讨论】：