Щелкните за пределами области, чтобы закрыть мобильное меню - PullRequest
Новая
       84

Щелкните за пределами области, чтобы закрыть мобильное меню

0 голосов
/ 14 июля 2020

У меня два вопроса.

Q.1

У меня есть веб-сайт WordPress, и я хочу, чтобы мобильное меню закрывалось, если кто-то нажимает вне меню в любом месте страницы.

В настоящее время он работает с гамбургер-меню.

Q.2

Это одностраничный веб-сайт. Если кто-то нажимает на меню, оно прокручивается.

Я хочу добавить поведение, если кто-то нажимает на мобильное меню, а затем оно прокручивается (сейчас оно работает) и скрывает меню (не работает).

Вы можете проверить ссылку на веб-сайт, где у меня возникла проблема.

https://www.dezigneronline.net/361apps/

Ниже приведен код: 

$(document).ready(function () {

    /* =================
     Menu Mobile
     =================== */
    $('.ct-main-navigation li.menu-item-has-children').append('<span class="ct-menu-toggle far fac-angle-right"></span>');
    $('.ct-menu-toggle').on('click', function () {
        $(this).toggleClass('toggle-open');
        $(this).parent().find('> .sub-menu, > .children').toggleClass('submenu-open');
        $(this).parent().find('> .sub-menu, > .children').slideToggle();
    });

    /* =================
     Menu Popup
     =================== */
    $('.ct-main-menu-popup li.menu-item-has-children > a').after('<span class="ct-menu-toggle"></span>');
    $('.ct-main-menu-popup .ct-menu-toggle').on('click', function () {
        $(this).toggleClass('toggle-open');
        $(this).parent().find('> .sub-menu, > .children').toggleClass('submenu-open');
        $(this).parent().find('> .sub-menu, > .children').slideToggle();
    });
    $('.ct-menu-popup').on('click', function () {
        $('body').addClass('ov-hidden');
        $(this).parents('body').find('.ct-header-popup-wrap').toggleClass('open');
    });
    $('.ct-menu-close').on('click', function () {
        $('body').removeClass('ov-hidden');
        $(this).parents('body').find('.ct-header-popup-wrap').toggleClass('open');
    });
    
    $("#ct-menu-mobile .open-menu").on('click', function () {
        $(this).toggleClass('opened');
        $('.ct-header-navigation').toggleClass('navigation-open');
    });

    $(".ct-menu-close").on('click', function () {
        $(this).parents('.header-navigation').removeClass('navigation-open');
        $('.ct-menu-overlay').removeClass('active');
        $('#ct-menu-mobile .open-menu').removeClass('opened');
        $('body').removeClass('ov-hidden');
    });

    $(".ct-menu-overlay").on('click', function () {
        $(this).parents('#header-main').find('.header-navigation').removeClass('navigation-open');
        $(this).removeClass('active');
        $('#ct-menu-mobile .open-menu').removeClass('opened');
        $('.header-navigation').removeClass('navigation-open');
        $('body').removeClass('ov-hidden');
    }); 
});

1 Ответ

0 голосов
/ 16 июля 2020

Как упоминалось в моем комментарии, вам нужно обработать щелчок по родительскому элементу, который охватывает всю страницу, чтобы закрыть меню, например, это может быть элемент body. Проблема: ваше меню является дочерним элементом тела и, следовательно, также запускает событие. Чтобы этого не произошло, вам потребуется stopPropagation(); в элементе меню, чтобы событие click не всплыло в DOM и не достигло вашего тела.

Рассмотрите эту упрощенную версию, чтобы продемонстрировать механизм c: 

$('body').not('.menu').on('click', function(){
    $('.menu').hide();
});

$('.menu').on('click', function(e){
    e.stopPropagation();
});
body , html{
  height: 100%;
  padding: 0;
  margin:0;
}

.menu{
  width: 20%;
  height: 100%;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="menu"></div>
</body>
...