Saludos corillo,
Estoy creando un menú y desplegando otro menus usando "listeners". Lo que he hecho hasta ahora
Código Javascript
:
Ver original<div id="menu">
<ul class="navigation">
<li style="border: 1px solid #eee;">
<a href="#">Foo</a>
<ul style="display: none;">
<li style="border: 1px solid #eee;"><a href="#">fooFoo</a></li>
<li style="border: 1px solid #eee;"><a href="#">fooBar</a></li>
<li style="border: 1px solid #eee;"><a href="#">fooBaz</a></li>
</ul>
</li>
<li style="border: 1px solid #eee;">
<a href="#">Bar</a>
<ul style="display: none;">
<li style="border: 1px solid #eee;"><a href="#">barFoo</a></li>
<li style="border: 1px solid #eee;"><a href="#">barBar</a></li>
<li style="border: 1px solid #eee;"><a href="#">barBaz</a></li>
</ul>
</li>
<li style="border: 1px solid #eee;">
<a href="#">Baz</a>
<ul style="display: none;">
<li style="border: 1px solid #eee;"><a href="#">bazFoo</a></li>
<li style="border: 1px solid #eee;"><a href="#">bazBar</a></li>
<li style="border: 1px solid #eee;"><a href="#">bazBaz</a></li>
</ul>
</li>
<li style="border: 1px solid #eee;">
<a href="#">Candy</a>
<ul style="display: none;">
<li style="border: 1px solid #eee;"><a href="#">candyFoo</a></li>
<li style="border: 1px solid #eee;"><a href="#">candyBar</a></li>
<li style="border: 1px solid #eee;"><a href="#">candyBaz</a></li>
</ul>
</li>
<li style="border: 1px solid #eee;"><a href="#">Fruits</a></li>
<li style="border: 1px solid #eee;"><a href="#">Vegetable</a></li>
<li style="border: 1px solid #eee;"><a href="#">twix</a></li>
<li style="border: 1px solid #eee;"><a href="#">apple</a></li>
<li style="border: 1px solid #eee;"><a href="#">fiber</a></li>
<li style="border: 1px solid #eee;"><a href="#">ice cream</a></li>
<li style="border: 1px solid #eee;"><a href="#">pizza</a></li>
</ul>
</div>
<script type="text/javascript">
function addListener(element, type, expression, bubbling)
{
bubbling = bubbling || false;
if(window.addEventListener) { // Standard
element.addEventListener(type, expression, bubbling);
return true;
} else if(window.attachEvent) { // IE
element.attachEvent('on' + type, expression);
return true;
} else return false;
}
elem = document.getElementById('menu').firstChild;
while(true){
switch(elem.nodeName){
case 'UL':
elem = elem.firstChild;
break;
case 'LI':
addListener(elem, 'click', function(){
childElem = this.firstChild;
function setBool(bool){ this.value = bool; }
var bool = new setBool(true);
while(true){
if(childElem.nodeName == 'UL'){
addListener(childElem, 'click', function(){
bool.value = false;
});
break;
}
childElem = childElem.nextSibling;
if(childElem == null){ break; }
}
if(bool.value && childElem != null){
if(childElem.style.display == 'block'){
childElem.style.display = 'none';
}else{
childElem.style.display = 'block';
}
}
});
break;
}
elem = elem.nextSibling;
if(elem == null){ break; }
}
</script>
Con eso puedo mostrar el sub-menu, pero me gustaría que si pulso en el sub-menu no se esconda, sino que de la única forma como puedo esconder el submenu es pulsando en el menu.
Por ejemplo si pulso cualquier parte de foo, o sea en el elemento
li muestra el sub-menú. Si vuelvo a pulsar en cualquier parte del elemento
li de foo se esconda, pero no se puede esconder si he pulsado dentro del elemento
ul dentro de foo.
No puedo crear otros elementos, porque el framework que uso para crearlo lo hace así, tengo que lidiar con ese tipo de menú. Tampoco quiero usar el elemento
a porque deseo que se pueda mostrar y esconder el menu cuando pulse en el elemento
li.
Traté de crear una variable y que dentro del segundo addListener volver a cambiarla, pero no hubo nada. Entonces pensé que pasando por referencia podía y no se me dió (¿o será que no estoy usando correctamente la referencia?).
Bueno espero a ver si me podrían indicar la mejor forma de hacerlo. Si el código requiere de regaños, adelante que ya tomé un relajante muscular para soportar el dolor de los golpes
