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.