Jquery toggleclass hover

Question

I got this sub menu on my link SLIDE, the thing is when i clicked to close the sub menu if i move the cursor somewhere else but the 'SLIDE' link it works fine, but if i close it and my cursor stay on the link the toggleclass of .hover is tigger, so i got a link 'active' and nothing to show.

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

How can i fix that, this is driving me crazy... thanks

    $(".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

Try this:

$(".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

Answer 2

Preferably use mouseenter and mouseleave instead of 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);
        }
    }
});

There, done! jsFiddle

You had this $(this).toggleClass('border_active border', 500); which also toggled the border class