Question

我正在构建一个菜单，它具有子菜单，当您将鼠标悬停在父项上时，这些子菜单会向下滑动；当您单击父项旁边的箭头时，这些子菜单会保持向下。我的悬停部件正常工作，但是当我单击箭头并离开父母的“活动咏叹调”时，它不会停下来。

.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 );
  }
});

如果您需要任何其他代码，那么我很乐意将其发布到！

Answer 1

我发现它不起作用的原因！

您不能将.off()或.on()函数与'hover'一起使用，而必须使用'mouseenter mouseleave'。然后将选择器从body更改为应用了悬停的项目。

所以有效的代码是：

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

jQuery：与激活和禁用滑动菜单有关的问题

1 个答案: