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类