Jump to content

More succinct way of writing this? (Show/hide drop down menu on hover)


Recommended Posts

I'm trying to write something that will detect whether my drop down menu is being hovered over (hence, show the menu) or not (hide the menu). This solution does work:

document.onmouseover = function(event)	{		if (event.target.parentElement === null || event.target.parentElement.parentElement === null || 		event.target.parentElement.parentElement.parentElement === null)	{			hide();		}		else if (event.target.parentElement === menu || event.target.parentElement.parentElement === menu || 		event.target.parentElement.parentElement.parentElement === menu)	{			show();		}		else	{			hide();		};		

However, I have two problems with it. First, it's not exactly succinct. Second, presumably if the DOM were altered in some way it might not work anymore. I did come up with this function to be used in place of the code block above:

function getParents(elem)	{		var a = elem;		var parents = [];		while (a)	{			a = a.parentElement;			parents.push(a);		}		for (var b = 0; b < parents.length; b++)	{			if (parents[b] === menu)	{				show();				break;			}			else	{				hide();			};		};	}

However, that doesn't work properly, as each time you hover over one of the menu items it re-shows the menu.


Can anyone suggest another way of doing this (don't worry about writing the code out for me, I just need a hint)?


If you need more code, let me know, wasn't sure how much to post as it's quite long.

Link to comment
Share on other sites

You should be adding the event listener specifically to the element you want to hover over and not just the document in general.


Dropdown menus can be done purely with CSS without the need of Javascript by using the :hover pseudo-class. There are many resources online: https://www.google.com/?gws_rd=ssl#q=css+dropdown+menu

Link to comment
Share on other sites

Well, I understand that, but the problem is getting it to hide the menu when it isn't being hovered over. I came up with this just now, though, which seems to work :) :

function getParents(elem)	{		var a = elem;		var parents = [];		while (a)	{			a = a.parentElement;			parents.push(a);		}		console.log(parents.indexOf(menu));		if (parents.indexOf(menu) >= 0)	{			show();		}		else	{			hide();		};	}

Also, thanks for the link! I didn't know you could use CSS. I'm mainly doing this to practice Javascript, but still, good to know.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...