Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jadsonlucena

obter elemento nodes sem efeito bubbles

Por , em Javascript

Recommended Posts

jadsonlucena    0

jadsonlucena
Postado

Galera, estou querendo criar um menu drop-down. Mas estou tendo dificuldades no onmouseover/onmouseout, pois ao tentar utiliza-lo verificando se o sub-menu existe para poder exibi-lo, me deparo com o efeito bubbles. e com isto não consigo obter exito na restrição da verificação. Como se existe um sub-menu ou se ele está a vista.

 

tentei utilizar um recurso de parar o efeito bubble:

HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/script.js"></script>

</head>
<body>

	<ol id="nav">
		<li><a href="">Menu 1</a>
			<ul>
				<li><a href="">Sub 1</a></li>
				<li><a href="">Sub 2</a></li>
				<li><a href="">Sub 3</a></li>
				<li><a href="">Sub 4</a>
					<ul>
						<li><a href="">Sub 1.1</a></li>
						<li><a href="">Sub 1.2</a></li>
						<li><a href="">Sub 1.3</a></li>
						<li><a href="">Sub 1.4</a>
							<ul>
								<li><a href="">Sub 2.1</a></li>
								<li><a href="">Sub 2.2</a></li>
								<li><a href="">Sub 2.3</a></li>
								<li><a href="">Sub 2.4</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="">Menu 2</a></li>
		<li><a href="">Menu 3</a></li>
		<li><a href="">Menu 4</a></li>
		<li><a href="">Menu 5</a></li>
	</ol>

</body>
</html>

CSS:

#nav ul {
	display: none;
}

JavaSccript:

window.onload = function() {
var doc = document.getElementById('nav').getElementsByTagName('li');

	for (var i in doc) {
		(function(doc,i){

			doc[i].onmouseover = function(e) {
			var evt = e ? e:window.event;
			if (evt.stopPropagation) { evt.stopPropagation(); } else { evt.cancelBubble = true; }

			var nodes = this.getElementsByTagName('ul')[0];

				if (nodes != null && this.style.display == '') {
					nodes.style.display = 'block';
					nodes.style.height = '130px';

					this.onmouseout = function() {

						if (nodes.style.display == 'block') {
							nodes.removeAttribute('style');
						}
				}

			};

		})(doc,i);
	}

};

Gostaria de saber uma solução para ao selecionar a respectiva LI que obtém um sub-menu, ele não venha verificar as LI's pais de todo o parente...

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Use os eventos onmouseenter e onmouseleave

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito