悬停时打开菜单而不是使用 jQuery 单击答案

【问题标题】：Open menu on hover instead of click with jQuery悬停时打开菜单而不是使用 jQuery 单击
【发布时间】：2020-06-26 18:34:49
【问题描述】：

我想将默认的 Bootstrap 导航栏组件更改为移动设备上的向下钻取导航。这样做吧，我添加了一些 JavaScript 代码来更改我的菜单。

这是我目前使用的代码：https://codepen.io/cray_code/pen/dENeKM

它工作正常，但在桌面上，菜单在单击后打开，而不是悬停事件。

对于桌面视口有以下代码：

$('.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 合作，但我不知道怎么做。

有什么方法可以将菜单从点击更改为悬停？

【问题讨论】：

你不能用css来做这个吗？
我试过了。但可以弄清楚如何。

标签： javascript jquery css bootstrap-4 mouseevent

【解决方案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');
   }
})

【讨论】：

谢谢，我在代码中没有看到任何关闭菜单的逻辑。我必须在哪里添加？

【解决方案2】：

正如您所说...您需要使用 mouseenter 和 mouseleave...只需执行此操作即可。

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

【讨论】：

【解决方案3】：

与您在 codepen 中的代码一起使用的 Css 代码：

.menu-item.has-sub-menu:hover > .menu > .menu-item{
    margin-top: 0;
    margin-bottom: 1em;
    opacity: 1!important;
    -webkit-transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
    transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
}

【讨论】：

【解决方案4】：

试试下面的代码

$('.mega-menu-trigger').hover(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');
                }
            });

这将在悬停时打开菜单

这里是小提琴链接https://jsfiddle.net/w4vmyrpz/

【讨论】：