Changing Hover To Click On Menu

I am having trouble changing the function to be called on 'click' rather than 'hover'. I have tried changing 'hover' to 'click' as well as 'toggle' with no positive results $('#men

Solution 1:

try this:

http://jsfiddle.net/GANeX/52/

var clicked = 0;
$('#menu li').click(
   function(){
        if(clicked === 0){
            $(this).stop().animate({height: '100px'},1000,function(){});
            $(this).find('div').show(600);
            clicked = 1;
        } elseif(clicked === 1){
            $(this).stop().animate({height: '20px'},1000,function(){});  
            clicked = 0;
        }
    }
 );

set a variable to keep track of clicked state

Solution 2:

You are passing two parameters to $(...).click(clickHandle). Just pass one function.

Check http://api.jquery.com/click/

In two arguments case,

http://api.jquery.com/click/

Solution 3:

click needs only one argument when I changed that all works fine.

Solution 4:

hover() takes two callbacks, one for mouseenter and one for mouseleave. If you want to change it to click, and the first click starts the first animation and the second starts the second one, you need to add a state variable to determine whether your element has been clicked once or twice.

$('#menu li').click(
function(){
        if(this.clicked)
        {
         //callback 1
        }
        else
       {
        //callback 2
       }
       this.clicked = !this.clicked;
    } 

);