javascript - 悬停时打开菜单而不是使用 jQuery 单击

Question

我想将默认的 Bootstrap 导航栏组件更改为移动设备上的向下钻取导航。
这样做，我添加了一些 JavaScript 代码来更改我的菜单。
这是我目前使用的代码:https://codepen.io/cray_code/pen/dENeKM
它工作正常，但在桌面上，菜单在单击而不是悬停事件后打开。
对于桌面视口(viewport)，有以下代码:

$('.mega-menu-trigger').bind('click' ,function(e){

    e.preventDefault();
    var current = $(this).next('.mega-menu');
    $('.mega-menu-trigger').not(this).removeClass('active');
    $(this).toggleClass('active');
    $('.mega-menu').not(current).removeClass('open').addClass('closed');
    if( !current.hasClass('open') ){
        current.removeClass('closed').addClass('open');
    } else {
        current.removeClass('open').addClass('closed');
    }
});

我尝试使用 mouseenter 更改代码对此:

$('.mega-menu-trigger').bind(mouseenter: function(e){

但这不起作用，我的问题是离开链接后菜单保持打开状态。
我想我必须使用 mouseleave但我不知道怎么做。
有什么方法可以将菜单从单击更改为悬停？

Answer 1

鼠标悬停时的菜单打开关闭行为可以通过以下方式结合使用 mouseenter 和 mouseleave 事件来实现。

// Klick Funktionen hinzufügen
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,function(e){

   e.preventDefault();
   var current = $(this).next('.mega-menu');
   $('.mega-menu-trigger').not(this).removeClass('active');
   $(this).toggleClass('active');
   $('.mega-menu').not(current).removeClass('open').addClass('closed');
   if( !current.hasClass('open') ){
      current.removeClass('closed').addClass('open');
   } else {
     current.removeClass('open').addClass('closed');
   }
})