[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!

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