jquery - Jquery 切换类悬停

Question

我在我的链接 SLIDE 上得到了这个子菜单，问题是当我点击关闭子菜单时，如果我将光标移动到其他地方，但“SLIDE”链接它工作正常，但如果我关闭它并且我的光标停留在链接上.hover 的切换类是跳跳虎，所以我有一个“活动”链接，没有什么可显示的。

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

最好使用mouseenterandmouseleave而不是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');
    }
});

演示