1

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

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

如果您使用单击事件打开了菜单，我在菜单中有一个关闭按钮来关闭它。我想通过删除菜单上的类来做到这一点。这是可行的，除非因为您仍然将鼠标悬停在菜单上，所以菜单不会消失，直到您将鼠标悬停在不理想的位置。我也尝试过使用.hide()，但这与 CSS 悬停功能相混淆。

jQuery中有没有办法删除元素的CSS悬停激活？下面是我如何使它工作的，但如果我可以取消绑定 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');
});

摆弄它

4

1 回答 1

1

我已经更新了这个小提琴中的代码

基本上，我只在具有“hoverManagement”类的li上制作了CSS悬停触发器。

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

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

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

于 2013-06-28T18:38:03.603 回答