Question

这里有一个移动菜单 - http://themepack.net/aaa/noar

当您点击菜单链接（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点击功能并遵循一些StackOverFlow旧问题，但我仍然无法弄明白。

请问有谁可以帮助我吗？

Answer 1

您需要将click事件分配给链接，并让链接触发关闭按钮。

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

Answer 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")，您还可以将事件绑定到菜单的链接，因此菜单将关闭。

Answer 3

尝试这样的事情：

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

Answer 4

我已经使用过它并且它正在工作：）

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

感谢大家的宝贵意见。

单击菜单链接后关闭菜单

4 个答案: