JQuery: проблемы с активацией и деактивацией скользящего меню - PullRequest
Новая
       4

JQuery: проблемы с активацией и деактивацией скользящего меню

0 голосов
/ 05 декабря 2018

Я создаю меню, оно имеет подменю, которое сдвигается вниз, когда вы наводите курсор на родительский элемент, и остается внизу, когда вы нажимаете стрелку рядом с родителем.Я включил парящую часть, но когда я щелкаю стрелку и оставляю «активную арию» родительского элемента, она не остается на месте.

Сама функция .click() не должна быть проблемой, потому что она меняетсякласс и печатает журнал.

После некоторого чтения я подумал, что функция .off() будет работать, но, похоже, она не ...

HTML 

<ul id="menu-nav" class="main-navigation">
	<li class="menu-item">item 1</li>
	<li class="menu-item menu-item-has-children">Item 2
		<ul class="sub-menu">
			<li class="menu-item">Item 2.1</li>
			<li class="menu-item">Item 2.2</li>
		</ul>
		<span class="sub-menu-arrow">
			::after
		</span>
	</li>
	<li class="menu-item">Item 3</li>
	<li class="menu-item">Item 4</li>
</ul>

JQUERY 

function menu_slide_toggle() {
  $('.sub-menu').slideToggle('fast');
}

$('.menu-item-has-children').hover( menu_slide_toggle );

$('.sub-menu-arrow').click(function(event) {
  $('.sub-menu-arrow').toggleClass('active');
  $('.sub-menu-arrow').toggleClass('inactive');

  if ($('.sub-menu-arrow').hasClass('active')) {
    console.log('active');
    $('body').off( 'hover', '.menu-item-has-children', menu_slide_toggle );
  } else {
    console.log('inactive');
    $('body').on( 'hover', '.menu-item-has-children', menu_slide_toggle );
  }
});

Если вам нужен какой-либо другой код, тогда я буду рад опубликовать его!

1 Ответ

0 голосов
/ 11 декабря 2018

Я нашел причину, по которой это не сработало!

Вы не можете использовать функции .off() или .on() с 'hover', вам нужно вместо этого использовать 'mouseenter mouseleave'.И я изменил селектор с body на элемент, к которому применено наведение.

Итак, сработал код: 

$('.menu-item-has-children').off('mouseenter mouseleave', menu_slide_toggle);
...