javascript - 单击时删除当前元素上的悬停激活

Question

我有一个以两种方式工作的下拉菜单

1. 经典 CSS 悬停
2. 如果您单击顶层 li，它会使用 jQuery 向菜单添加一个类，从而显示菜单。

我在菜单中有一个关闭按钮，如果您通过单击事件打开了菜单，则可以将其关闭。我想通过删除菜单上的类(class)来做到这一点。这行得通，除非你仍然悬停在菜单上，菜单不会消失，直到你悬停，这是不理想的。我也尝试过使用 .hide() 但是这会扰乱 CSS 悬停功能。

在 jQuery 中有没有办法移除元素的 CSS 悬停激活？下面是我如何让它工作的，但我觉得如果我可以解除绑定(bind) CSS 悬停，我可以用更少的 JS 来完成。

    // Add class 'show' to .meganav__container. Visibility is controlled by CSS
    $('.meganav > li > a').on('click',function(){
        $('.meganav__container').removeClass('show');
        $(this).parents('li').children('.meganav__container').toggleClass('show');
    });

    // Closes menu when close button is clicked
    $('.subnav__container .close').on('click', function(){
        $(this).parents('.meganav__container').hide();
    });

    // For UX I'd like the menu to still work with hover
    $('.meganav > li').hover(
        function(){
            $(this).children('.meganav__container').show();
        },
        function(){             
            $(this).children('.meganav__container').hide();
        }
    );

这是我希望它的工作方式

// Add class 'show' to .meganav__container. Visibility is controlled by CSS
$('.meganav > li > a').on('click',function(){
    $('.meganav__container').removeClass('show');
    $(this).parents('li').children('.meganav__container').toggleClass('show');
});

// Closes menu when close button is clicked
$('.subnav__container .close').on('click', function(){        
    //Remove hover on parent li but this doesn't work
    $(this).parents('li').unbind('onmouseover').unbind('onmouseout');
    $(this).parents('.meganav__container').removeClass('show');
});

Fiddle with it

Answer 1

我已经更新了这个 fiddle 中的代码

基本上，我只在类为“hoverManagement”的 li 上设置了 CSS 悬停触发器。

然后，我们需要确保每当我们将鼠标悬停在属于导航 ul 的“li”元素上时，class 属性都会设置为“hoverManagement”，因此它可以触发 CSS 悬停。

.meganav > li.hoverManagement:hover .meganav__container, .meganav__container.show {
    display: block;
}

对于更新的 Javascript，请参阅提到的 fiddle 。