Use mouse 'on click' instead of 'mouse over' event, jquery

Question

I have this script here which works fine, but I need to make it work on mouse click instead of mouse hover.

I have tried, but failed. It looks simple, but I can't figure it out. Can anyone help?

code is:

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

code below works in ie, not in firefox.

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

Answer 1

Try this

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

You can replace the .parent() by using .closest() if the HTML structure is known..

OR

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

WORKING DEMO