更改悬停以单击菜单

Question

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

$('#menu li').hover(
    function(){
            $(this).stop().animate({height: '100px'},1000,function(){});
            $(this).find('div').show(600);
        }
    ,
    function(){
            $(this).stop().animate({height: '20px'},1000,function(){});
        } 
  ); 

Do I have to bind the event if I want to change it to 'click'? Any help is greatly appreciated.

Here's the fiddle: http://jsfiddle.net/GANeX/7/

Answer 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;
        } else if(clicked === 1){
            $(this).stop().animate({height: '20px'},1000,function(){});  
            clicked = 0;
        }
    }
 );

set a variable to keep track of clicked state

Answer 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/

Answer 3

当我更改时， 单击只需要一个参数就可以正常工作。

Answer 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;
    } 

);