CODEWITHSUNDEEP
jqueryhtml
user0129e021939232
user0129e021939232

Reputation: 6355

jQuery multiple handlers

Is it possible to have multiple handlers for my jQuery for example on a click on my navigation I want it to show the child elements which it does and toggles between the two. However I also want it to hide when the mouse is out.

Is there any point of writing two seperate functions or can I merge two handlers into one as so:

I've created a jsFiddle if you would like to view or my code is 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 doesn't work but I assume it could work like above?

Does anybody have any ideas?

Upvotes: 4

Views: 118

Answers (1)

simonzack
simonzack

Reputation: 20938

Just put spaces in-between:

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

I believe this is what you've meant 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() does here is to clear the previous animation queue, so it doesn't repeat if the event fires multiple times.

http://jsfiddle.net/YQNsL/

Upvotes: 3

Related Questions