obter elemento nodes sem efeito bubbles
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);
}
};Discussão (2)
Carregando comentários...