Many jQuery handlers

Question

Is it possible to have multiple handlers for my jQuery, for example, by clicking on my navigation. I want it to show the children that it executes, and toggles between them. However, I also want it to hide when the mouse is missing.

Does it make sense to write two separate functions or can I combine the two handlers into one like this:

I created jsFiddle if you want to view or my code below:

Js / js.js

$('.child').hide(); $('.parent').on('click', 'mouseout', function() { $('#usernav').find('ul').slideUp(); $(this).find('ul').slideToggle(); }); 

index.html

 <div class="rightBottom"> <h1 class="boxheadings">Other functions</h1> <p class="boxp">Click this button to view your current published site in a new window. This will not show your most recent changes until you click the 'Publish Changes' button on the right, alternatively click view local to see unpublished changes.</p> <ul id="usernav"> <li class="parent">Manage <ul class="child"> <li>child11</li> <li>child12</li> </ul> </li> <li class="parent">Subscriptions <ul class="child"> <li>E-Briefings</li> <li>E-Briefings Subscriptions</li> <li>Knowledge Briefings</li> </ul> </li> <li class="parent">Media Store <ul class="child"> <li>Image Store</li> <li>Document Store</li> <li>Media Store</li> </ul> </li> 

This does not work, but I assume that it can work as above?

Does anyone have any ideas?

Answer 1

Just put spaces between:

 $('.child').hide(); $('.parent').on('click mouseout', function() { $('#usernav').find('ul').slideUp(); $(this).find('ul').slideToggle(); }); 

I believe that this is what you wanted to do, however:

 $('.child').hide(); $('.parent').on('click', function() { $(this).find('ul').stop(true, false).slideToggle(); }).on('mouseout', function() { $('#usernav').find('ul').stop(true, false).slideUp(); }); 

What stop() here to clear the previous queue of the animation, so it does not repeat if the event fires several times.

http://jsfiddle.net/YQNsL/