JQuery：激活和停用滑动菜单的问题答案

【问题标题】：JQuery: issues with activating and disactivating a sliding menuJQuery：激活和停用滑动菜单的问题
【发布时间】：2018-12-11 16:04:13
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery drop-down-menu slidetoggle

【解决方案1】：

我找到了它不起作用的原因！

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

所以有效的代码是：

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

【讨论】：