закрыть sidenav при нажатии

Здравствуйте, не могли бы вы помочь мне с моей функцией Jquery? Когда отображается мой sidenav, если я нажимаю на ссылку, боковая панель остается открытой, и контент не отображается. Может я что-то пропустил?

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>

jquery sidenav
person Rabah    schedule 22.06.2018    source источник
comment
Примечание. Каждый раз, когда вы нажимаете на гамбургер, вы создаете дублирующую привязку щелчка на sideBarArrow. Не делай этого. Переместите эту привязку за пределы обработчика и сделайте это только один раз.   -  person Taplar    schedule 22.06.2018
comment
Приведенный выше HTML-код не содержит ни одного элемента с классом hamburger, а $('sidebar-menu-arrow'), который также не включен, похоже, ссылается на тег (нет # или . для указания идентификатора или класса).   -  person Matthew Moore    schedule 22.06.2018
comment
спасибо ребята за ответ. Да, извините, я забыл удалить $sideBarArrow = $('sidebar-menu-arrow') я не использую этот класс.   -  person Rabah    schedule 22.06.2018
comment
Только с кодом, который у вас есть, я не могу понять, в чем проблема, прямо сейчас он выглядит вот так . Поместите в вопрос минимальный воспроизводимый пример, в идеале используйте фрагменты стека (кнопка <> на панели инструментов), чтобы сделать его работоспособным. (вот как это сделать).   -  person Matthew Schlachter    schedule 22.06.2018
comment
я разместил свой код онлайн portfolio.rabahbook.fr, мы можем увидеть проблему в мобильном режиме в браузере.   -  person Rabah    schedule 22.06.2018
comment
@MatthewSchlachter, я обновил фрагменты, которые вы мне дали. Пожалуйста, помогите мне, я новичок в кодировании Jquery ‹script async src=//jsfiddle.net/cbkafv6z/19/embed/›‹/script›   -  person Rabah    schedule 22.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение, но одна ссылка не работает. На данный момент это работает. Спасибо за вашу помощь.

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();
person Rabah    schedule 22.06.2018