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

Question

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

.click() 函数本身应该不是问题，因为它更改了 class 并打印了日志。

经过一些阅读，我认为 .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 );
  }
});

如果您需要任何其他代码，我很乐意post！

Answer 1

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

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

所以有效的代码是：

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

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

JQuery: issues with activating and disactivating a sliding menu

javascript

jquery

slidetoggle

drop-down-menu