jquery toggleclass hover

Question

我在我的鏈接幻燈片上得到了這個子菜單，事情是當我點擊關閉子菜單，如果我將光標移動到其他地方，但'幻燈片'鏈接工作正常，但如果我關閉它，我的光標留在鏈接上.hover的觸發器是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

試試這個：

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

最好使用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類