Stop function from executing

JavaScript
1

I’m having some difficulty preventing a function from executing.

Here’s a scenario:
I have a drop down list that has a sub menu. When you “mouseover” the menu heading, the sub menu expand and when you “mouseout” the menu heading, the submenu collapse.
I also add “mouseover” and “mouseout” listeners to the sub menu.

My trouble is how do I prevent the drop down list from collapsing so that I can get to the sub menu. And only collapse when there is a “mouseout” on both the menu heading and the sub menu?

In short: how do I prevent a function from executing, from inside another function?

2

I think the easiest way to do that would be to add a variable outside of both the functions so they can both see it. This var would contain the hover state (e.g. true if hovering, false if not).

Another solution would be to have a markup structure along the lines of:


<ul>
	<li>
		<a href=""></a>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</li>
	<li>
		<a href=""></a>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</li>
</ul>

This way, you can track a hover state on a LI using CSS and display the child UL. Technically you would still be hovering over the LI when hovering over the child UL below it (so long as there is no margin / gap between the LI and the child UL)

See A List Apart: Articles: Suckerfish Dropdowns for some more info on the markup / CSS required

The JS required for this should be fairly minimal.

Let me know if I’m completely on the wrong track with this solution here :wink: