1

Есть менюшка вида:

<ul>
 <li>
  <a href="#">Some Link</a>
  <ul class="sub-menu">
   <li>Link 2end Level</li>
  </ul>
 </li>
 <li>
  <a href="#">Some Link 2end</a>
  <ul class="sub-menu">
   <li>Link 2end Level</li>
  </ul>
 </li>
</ul>

Рабочий JS

jQuery(function($){

        $('ul.main-menu li').each(function(e){

        $(this).click(function(event){

          event.preventDefault();

          if (e === 35 || e === 18 || e === 17 || e === 34) {
            $('ul.sub-menu').addClass('asx');
          }

          else {
            $('ul.sub-menu').removeClass('asx');
          }

          if ($(this).hasClass('menu-item-has-children')) {

            if ($(this).hasClass('active-nav')) {

              let subUla = $(this).find('ul').first();  

              $(subUla).css({
                'margin-top': '-100%',
                'display': 'none',
              });

              $('.nav-wrapper').css({
                'margin-bottom': '0',
                'transition': '0.3s',
              });

              $(this).removeClass('active-nav');

            }

            else {

              let subUl = $(this).find('ul').first();  

              $('ul.main-menu').find('.active-nav').removeClass('active-nav');

              $('ul.main-menu').find('.sub-opened').css({'display': 'none'});

              $(this).addClass('active-nav');

              if ($(subUl).css('display') === 'block') {
                $(subUl).css({
                    'margin-bottom': '-100%',
                    'display': 'none',
                });
              }

              else {

                let subUld = $(this).find('ul').first(); 

                $(subUld).css({'display': 'block'});

                let subMenuHeight = $(subUld).innerHeight() + 30;

                $(subUld).addClass('sub-opened');

                $(subUl).css({
                  'margin-top': '20px',
                });

                $('.menu-main-menu-container').css({
                    'margin-bottom': subMenuHeight,
                });

                $('.nav-wrapper').css({
                  'margin-bottom': subMenuHeight,
                  'transition': '0.3s',
                });

              }
            }
          }

          else {

            let subMenuHeightClose = $('.hovered-menu').height();

            $('.nav-wrapper').css({
              'margin-bottom': '0',
              'transition': '0.3s',
            });

            $('ul.sub-menu').css({
                'margin-bottom': '-100%',
                'display': 'none',
            });

            $('.menu-main-menu-container').css({
                'margin-bottom': '0',
            });
          }
        });
    });
});

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

1 ответ 1

2
$('ul.main-menu > li').click(function(event) {
  // account for event bubbling:
  if ($(event.target).closest(".sub-menu").length)
    return;

.each( - не нужен.

11
  • Но у меня 6 элементов в меню верхнего уровня 25 сен 2018 в 15:15
  • @НикитаРязанов Это очень хорошо ). Им всем будет назначен обработчик click.
    – user176262
    25 сен 2018 в 15:16
  • все равно при клике ul.sub-menu > ul > li у меня sub-menu закрывается 25 сен 2018 в 15:20
  • @НикитаРязанов Потому что Вы выбираете $('ul.sub-menu')., а надо $(this).find('ul.sub-menu').
    – user176262
    25 сен 2018 в 15:24
  • не совсем понял где использовать: $(this).find('ul.sub-menu') ))) 25 сен 2018 в 15:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.