Listeners y Referencias

[abimaelrc]

Saludos corillo,

Estoy creando un menú y desplegando otro menus usando "listeners". Lo que he hecho hasta ahora

Código Javascript:

<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

[masterpuppet]

Que tal abimael,

Podrias evaluar el target y si es distinto del li o del a, simplemente hacer un return, creo que era algo así(los efectos de las librerias ),

Código Javascript:

...
addListener(elem, 'click', function(e) {
 
    var event = e || window.event;
    if(!event.target) {
      event.target = event.srcElement;
    }
    
    childElem = this.firstChild;
 
    if(this != event.target 
            && childElem.nextSibling != event.target) {
        return false;
     }
    
    ...
}
 

y no seria mejor setear clases a los elementos para despues asignar los eventos ?, esos breaks no estan en el Zend Coding Standard .

Saludos.

[abimaelrc]

Tipo gracias Hasta ahora queda así, pero faltan unos golpes que no he recibido Claro otra forma de hacerlo es así como indicas de lo de asignar la clase, pero mientras, estoy experimentando

Código HTML:

<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(e){
                childElem = this.firstChild;
 
                var bool = true;
 
                while(true){
                    if(childElem.nodeName == 'UL'){
                        var event = e || window.event;
                        if(!event.target){ event.target = event.srcElement; }
                        if(this != event.target){
                            bool = false;
                        }
                        break;
                    }
                    childElem = childElem.nextSibling;
                    if(childElem == null){ break; }
                }
                if(bool && 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>
 

Ahora me intriga eso de "esos breaks no estan en el Zend Coding Standard", ¿cuá sería el standard? Porque me dejaste

[abimaelrc]

Oh, otra cosa, ¿para que mencionas esta parte?

Código Javascript:

&& childElem.nextSibling != event.target
 

¿Por qué verificas el siguiente sibling?

[masterpuppet]

Lo de Zend es una broma abimael, lo digo porque tenes while + switch + while + break anidados, no queda muy "limpio", con respecto a verificar el sibling, es una forma muy pobre de comprobar el click sobre el a, porque según entiendo, tal cual esta ahora, si clickeas en el a, no hace el open del toggler.
Y el target deberia estar fuera del while, algo asi:

Código Javascript:

...
addListener(elem, 'click', function(e){
 
    childElem = this.firstChild;
 
    var event = e || window.event;
    if(!event.target){ 
        event.target = event.srcElement; 
    }
    if(this != event.target){
        return false;
    }
 
    while(true){
        if(childElem.nodeName == 'UL'){
            break;
        }
        childElem = childElem.nextSibling;
        if(childElem == null){ break; }
    }
 
    if(childElem != null){
      childElem.style.display = childElem.style.display == 'block'
                              ? 'none'
                              : 'block';
    }
 
});
...
 

Saludos.

[abimaelrc]

Me imaginé que era un broma, pero siempre uno se sorprende con alguna respuesta tipo James Bond, Misión Imposible y Fast Five Por eso pregunté por si acaso, se me escapaba algo que no veía.

Y lo de a tienes mucha razón, ya lo había previsto e hice bien similar a lo que hiciste