CODEWITHSUNDEEP
jquerycss
take that
take that

Reputation: 61

add click to hover event

i need to customize a mega menu that opens only on hover (display:none/display:block).

i need it to work also on click so i added this 

     $(".menuitem_fullwidth").click(function(){
        $(this).find(".dropdown_fullwidth").css( "display", "block" );

           return false;
        });

but now it opens on click but when i click on a different menu item nothing happens

only the first menu(first click) always stay open and doesnt close or change to another item

Upvotes: 0

Views: 71

Answers (4)

A.T.
A.T.

Reputation: 26382

i assume you are trying to open one menu at a time, you can use toggle,

$(document).on('click','.menuitem_fullwidth'(function(){
        $('.dropdown_fullwidth').toggle();
        $(this).find(".dropdown_fullwidth").toggle();
           return false;
        });

Upvotes: 0

Scott Selby
Scott Selby

Reputation: 9580

take the hover code that you already had and just add the click event to it. You can have multiple events bound to the same code

$('#element').on('hover click', function() {
  // code here..
});

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

Give this a try

 $(".menuitem_fullwidth").click(function(){
    $(".dropdown_fullwidth").css({display: "none"});
    $(this).find(".dropdown_fullwidth").css( "display", "block" );
 });

Upvotes: 1

wickywills
wickywills

Reputation: 4204

Need to close all the menus first, then open the one that's clicked

 $(".menuitem_fullwidth").click(function(){
        $(".dropdown_fullwidth").css( "display", "none" );
        $(this).find(".dropdown_fullwidth").css( "display", "block" );

           return false;
        });

Upvotes: 2

Related Questions