[jQuery] Accordion Hover effect bug

[RipzCurlz]

Heres my full jQuery code for this accordion,



$(document).ready(function() {

$('div.accordionButton').mouseover(function() {
$('div.accordionContent').hide('fast');
$(this).next().slideDown('normal');
});


$('div.accordionContent').mouseout(function() {
$("div.accordionContent").slideUp('normal');
});


$("div.accordionContent").hide('fast');

});


And heres my problem:



$('div.accordionContent').mouseout(function() {
$("div.accordionContent").slideUp('normal');
});


I have it set so that when a user moves the mouse off the div.accordionContent the content slides up.
In div.accordionContent there are multiple <a> tags listed, and when i hover over one of these <a> tags that are inside the div.accordionContent,
the content slides up before i get a chance to click on one of the listed <a> links.

So im assuming this is because moving the mouse onto the <a> tag is technically mousing out of div.accordionContent and therefore sliding the list up.

My jQuery syntax knowledge is limited, so i will try explain to the best of my ability what i want to do:
Somehow include the <a> tags in the mouseout function above so that when a user hovers over the <a> tags which are (children of div.accordionContent) the list doesnt slide up,
because it recognizes that they are part of the div.

[jscheuer1]

Something like:


$('div.accordionContent').mouseout(function(event) {
var r = event.relatedTarget;
while(r && r.parentNode){
if(this === r){
return;
}
r = r.parentNode;
}
$("div.accordionContent").slideUp('normal');
});

[RipzCurlz]

wow thats amazing it works!

i dont understand how but it works!

Thanks so much jscheuer1 your a Genius!!

It works perfectly :O it stumped me for a good few hours and I would have never came up with what you came up with haha.

Cheers! :D

~Ripz

[jscheuer1]

The relatedTarget property of the jQuery Event Object is a normalization of the various methods used to obtain the element the mouse moves from when a mouseover or to when a mouseout event takes place. In your function this refers to the element itself (the one the event function was assigned to). These are both normal elements (not jQuery $ type arrays). I simply 'walk up the DOM tree' to see if the element is either the relatedTarget (in the case of a bubbling onmouseout event contained within it), or the parent of the relatedTarget (in the case of moving over a contained element triggering the parent's onmouseout event. I'm not sure which or if both were causing the problem, but it doesn't matter - both bases are covered.

I did a little experimenting, and it appears that both are involved. And I'm not sure if this will make it any clearer, but a jQuery shorthand method of doing the same thing would be:


$('div.accordionContent').mouseout(function(e) {
if($.inArray(e.relatedTarget, $(this).contents().andSelf()) > -1){
return;
}
$("div.accordionContent").slideUp('normal');
});

Or, even more concise:


$('div.accordionContent').mouseout(function(e) {
if($.inArray(e.relatedTarget, $(this).contents().andSelf()) < 0){
$("div.accordionContent").slideUp('normal');
}
});