单击时关闭sidenav

Question

你好，你能帮我解决我的 Jquery 功能吗？当我的 sidenav 显示时，如果我单击 link，侧边栏将保持打开状态并且不会显示任何内容。可能我错过了什么？

var $hamburger = $(".hamburger"),
    $menuWrap = $('.menu-wrap');

$hamburger.on("click", function () {    
    $hamburger.toggleClass("is-active");
    // Do something else, like open/close menu
    $menuWrap.toggleClass('menu-show');
    $hamburger.click(function(){
        $(this).next().slideToggle(300);

    });

});

抱歉，我用整个 html 代码添加了缺失的代码。

<div class="d-md-none">
            <div class="d-flex justify-content-end">
                <div class="hamburger hamburger--elastic">
                  <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>
            </div>
            <div class="container">
                <div class="row d-flex justify-content-center">
                    <div class="menu-wrap">
                        <div class="col-12 menu-sidebar display-6">
                            <ul class="menu navbar-nav ml-auto">
                                <li class="nav-item"><a href="./index.php">ACCUEIL</a></li>
                                <li class="nav-item"><a href="#portfolio">PORTFOLIO</a></li>
                                <li class="nav-item"><a href="#contact">CONTACT</a></li>
                                <li class="nav-item"><a href="#about">QUI EST RABAH</a></li>
                            </ul>           
                        </div>
                        <hr class="light-yellow my-5">
                      <div class="col-12 d-flex justify-content-between wow fadeInDown">
                        <a href="http://www.linkedin.com/in/rabah-a-44062b5b" data-delay="50" target="new"><i class="fab fa-linkedin-in fa-2x text-jaune"></i></a>
                        <a href="https://www.instagram.com/rabahbook/?hl=fr" data-delay="50" target="new"><i class="fab fa-instagram fa-2x text-jaune"></i></a>
                        <i class="fab fa-behance fa-2x text-jaune"></i>
                        <i class="fab fa-facebook-f fa-2x text-jaune"></i>
                      </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

我找到了解决方案，但其中一个 link 不起作用。目前它有效。感谢您的帮助。

var $hamburger = $(".hamburger"),
    $menuWrap = $('.menu-wrap');

function sideNavBar() {
    $hamburger.on("click", function (e) {
        $hamburger.toggleClass("is-active");
        // Do something else, like open/close menu
        $menuWrap.toggleClass('menu-show');
        $hamburger.click(function () {
            $(this).next().slideToggle(300);
        });
        e.stopPropagation();
        return false;
    });
    $('*:not(.hamburger)').on('click', function () {
        $menuWrap.removeClass('menu-show');
        $hamburger.removeClass('is-active');

    });

}

sideNavBar();

单击时关闭sidenav

close sidenav when click

jquery

sidenav