Question

我在我的链接SLIDE上有这个子菜单，事情就是当我点击关闭子菜单，如果我将光标移动到其他地方，但'SLIDE'链接它工作正常，但如果我关闭它和我的光标停留在链接上.hover的toggleclass是tigger，所以我得到了一个“活跃”的链接，没有任何显示。

http://jsfiddle.net/6GPtg/13/

我怎么能解决这个问题，这让我发疯... 感谢

    $(".border").hover(function(){
        if($(this).next('.sous_menu').is(':visible')){
            $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');

        }else{
            $(this).toggleClass('border_active border', 500);
        }
    });

Answer 1

最好使用mouseenter和mouseleave代替hover。

$(".border").on({
    "mouseenter": function(){
        if($(this).next('.sous_menu').is(':visible')){
            $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');
        }else{
            $(this).addClass('border_active', 500);
        }
    },
    "mouseleave": function(){
        if($(this).next('.sous_menu').is(':visible')){
            $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');
        }else{
            $(this).removeClass('border_active', 500);
        }
    }
});

那里，完成了！ jsFiddle

您有$(this).toggleClass('border_active border', 500);这也切换了border类

Answer 2

试试这个：

$(".border").click(function (e) {
    $(".sous_menu").slideUp('fast');
    if ($(this).next('.sous_menu').is(':visible')) {
        $(this).next(".sous_menu").slideUp('fast');
        if(!$(this).hasClass('border_active'))
        $(this).toggleClass('border_active border', 500);
    } else {
        $(this).next(".sous_menu").slideDown('fast');
    }
});

<强> DEMO

Jquery toggleclass悬停

2 个答案: