funcion Oncclick en dropdown

[kenji0023]

Hola haber si me pueden ayudar, estoy empezando a tocar javascript, pero no entiendo como hacer esta funcion.

Basicamente tengo un menu que conforme voy pasando el mouse se me abren mas opciones, yo lo que quiero que esas opciones se abran haciendo click y se cierren de igual manera haciendo click.



Este es el codigo que tengo, va conectado a la base datos tambien, para segun que seleccion muestre una opcion u otra.

Código HTML:

<ul class="megamenu"><!-- Begin Mega Menu -->



        <li class="top_level"><span>Marcas</span><!-- Mega Menu Button / Container -->



            <ul id="test" class="megamenu_main main_opened"><!-- Nivel Marcas -->
			
                <?php
                if($marcas) {
                foreach ($marcas as $marca)
                {
                 $modelos = $db->get_results("SELECT
                 modelos.idModelo,
                 modelos.modelo
                 FROM
                 modelos
                 WHERE
                 modelos.idMarca = {$marca->idMarca}
                 ORDER BY
                 modelos.modelo ASC");
                ?>
	
                <li class="title dropdown_arrow relative_dropdown">

                    <a href="#"><?php echo $marca->marca; ?></a>

                    <ul id="test"><!-- Nivel Modelos -->

                        <?php
                        if($modelos) {
                        foreach ($modelos as $modelo)
                        {
                          $motores = $db->get_results("SELECT
                          motores.motor,
                          motores.idMotor
                          FROM
                          motores
                          WHERE
                          motores.idModelo = {$modelo->idModelo}
                          ORDER BY
                          motores.motor ASC");
                        ?> 
						
						<li class=" dropdown_arrow relative_dropdown">
						
						   <a href="#"><?php echo $modelo->modelo; ?></a>
						   
						   
						      <ul id="test"><!-- Nivel Motores -->
                                  <?php
                                  if($motores) {
                                  foreach ($motores as $motor)
                                  {
                                  ?> 
						<li>
						    <a href="piezas.php?id=<?php echo $motor->idMotor; ?>"><?php echo $motor->motor; ?></a>
						</li>
						<?php
                          } //end foreach motor
                          } //end if motores
                        ?>

                              </ul>



                        </li> 
						<?php
                         } //end foreach modelo
                         } //end if modelos
                        ?>


                    </ul><!-- End Second Drop Down Level -->

                </li>
				<?php
                  } //end foreach marca
                  } //end if marcas
                ?>

            </ul><!-- End First Drop Down Level -->

        </li><!-- End Mega Menu Button / Container -->

    </ul><!-- End Mega Menu --> 

Y este el javascript para que detecte el cuando hago click, que no me funciona, en si no se que he hecho mal, he puesto a los ul la id del script.

Código HTML:

<script>
		   function getEventTarget(e) {
           e = e || window.event;
           return e.target || e.srcElement; 
           }

           var ul = document.getElementById('test');
           ul.onclick = function(event) {
           var target = getEventTarget(event);
           alert(target.innerHTML);
           };
		</script> 

De ante mano quiero decir, que no quiero que me den el codigo hecho, quiero aprender a hacerlo yo mismo, me gustaria saber si voy bien encaminado o trato de hacer algo imposible o si necesito encaminarme hacia otra cosa.

Un saludo gracias.

[juanito1712]

no te puedo dar una solución pero si un consejo... simplifica, quita que recupere de la base de datos quita que hayan mil opciones quita los múltiples niveles

pon solo un menú de dos opciones y trata de hacer que despliegue un submenú con una de ellas, y trata de hacerlo de forma que pueda reutilizarse esa misma función con el menú que va a abrir para que abra otro hijo si es que existe, y luego trata de hacer que abra un segundo nivel as ver si funciona, cuando lo tengas y funcione en la versión simple mete toda la paja restante.

Será mas fácil para tí y también mas fácil para nosotros si nos preguntas.
;)

[hcosta]

Hola, fíjate que estás repitiendo ids por ahí, una id debe ser única en todo el documento, en caso contrario sólo te funcionará el primer elemento con la id al añadir un evento :P

Yo usaría una clase común y con document.getElementsByClassName que devuelve la lista añadiría los eventos en un for o algo, no se, prueba tu mismo :D

Suerte