使用鼠标'点击'而不是'鼠标悬停'事件，jquery

Question

我有这个脚本here它工作正常，但我需要使它在鼠标单击，而不是鼠标悬停工作。

我试过了，但失败了。它看起来很简单，但我无法弄清楚。谁能帮忙？

代码：下面

$(".cat").hover(function(){ 
    $(this).parent().parent().find(".sub_menu").hide(); 
}, 
function() { 
    $(this).parent().parent().find(".sub_menu").show(); 
});` 

代码在IE中，而不是在Firefox浏览器。

$(".cat").on('click', function(){ 
    $(this).parent().parent().find(".sub_menu").toggle(); 
}); 

Answer 1

试试这个

$(".cat").on('click', function(e){ 
    e.preventDefault(); 
    $(this).parent().parent().find(".sub_menu").toggle(); 
}); 

您可以通过，如果HTML结构是已知的使用.closest()更换.parent（）..

OR

$(".cat").on('click', function(e){ 
     e.preventDefault(); 
     $(this).closest('.menu').find(".sub_menu").toggle(); 
}); 

WORKING DEMO

Answer 2

$(".cat").on('click', function(){ 
    $(this).parent().parent().find(".sub_menu").toggle(); 
});