Switching from hover to click on the menu

Question

Switching from hover to click on the menu

I am struggling with adjusting the function to trigger on 'click' instead of 'hover'. I have attempted changing 'hover' to 'click' and using 'toggle' but have not seen any positive outcomes.

$('#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 need to bind the event in order to switch it to 'click'? Any assistance would be greatly appreciated.

Here is the fiddle link for reference: http://jsfiddle.net/GANeX/7/

javascript jquery html css user-interface

Answer 1

Answer №1

Here is a suggestion for you:

Click here to view the code snippet

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

Remember to set a variable to keep track of the clicked state.

Answer 2

Here is a suggestion for you:

Click here to view the code snippet

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

Remember to set a variable to keep track of the clicked state.

Answer 3

Answer №2

Instead of passing two parameters to $(...).click(clickHandle), only pass one function.

For more information, refer to http://api.jquery.com/click/

In the scenario of two arguments being passed,

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

Answer 4

Instead of passing two parameters to $(...).click(clickHandle), only pass one function.

For more information, refer to http://api.jquery.com/click/

In the scenario of two arguments being passed,

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

Answer 5

Answer №3

After updating the argument for click , everything started working smoothly with just one parameter.

Answer 6

After updating the argument for click , everything started working smoothly with just one parameter.

Answer 7

Answer №4

hover() accepts two callbacks, one for mouseenter and another for mouseleave. To switch it to a click event where the first click triggers the first animation and the second click triggers the second one, you must introduce a state variable to track if your element has been clicked once or twice.

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

Answer 8

hover() accepts two callbacks, one for mouseenter and another for mouseleave. To switch it to a click event where the first click triggers the first animation and the second click triggers the second one, you must introduce a state variable to track if your element has been clicked once or twice.

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

Switching from hover to click on the menu

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

buttons for displaying a slideshow using jquery

In PHP, special characters in HTML remain unchanged when entered into a text input field

Use multiple lines to create a stunning visualization using morris.js. Let your data

Tips for passing parent component state data to a child component using a variable

Issue: ENOENT - The requested file or directory cannot be found in the context of an Angular2 and Express.js

The CSS infinite animation becomes erratic and sluggish after a short period of time

What is the best way to modify a Bootstrap class' SASS attribute within a React component?

Employing specific delimiters with hogan-express while managing the {{{ yield }}} statement

Sending an AJAX request to a PHP file to retrieve data in JSON format

What is the most efficient way to create a vertically stacked grid with minimal reliance on JavaScript?

Transfer properties to the children of this component

How can I show the unique phrase "Today" on a specific date (date=today) with the Angular-UI-Bootstrap Datepicker?

AngularJS controllers and global scope management

Is there a way to incorporate an 'ended' feature into the .animate() function?

The use of JSON.parse does not support parsing URL links

The click function is not functioning properly when trying to integrate a jQuery Ajax HTTP request

Tips for dividing a div into percentages while maintaining a constant width for a div on the left side

Using Node.js to send an OSC message via HTTP request

Encountered a JavaScript error while using Internet Explorer

Enhance your webpage with a stunning background video