Hola buenos días, este es mi primer post en este foro, y ya que por mas que busque no encuentro la solución.. a ver si vosotros me podéis ayudar.
Pues a ver, tengo el típico menú formado por <ul><li><ul><li>, pues todo bien hasta que me pongo con jQuery, que quiero darle efectos slideDown y slideUp para visualizar los submenús (abajo esta el código). El problema viene cuando hago click en un submenú (por ejemplo en HTML, CSS, Mallorca...etc) el cual me hacen un slideUp en el momento que yo no quiero...
El tema es que quiero hacer el efecto justo cuando se haga click encima del titulo de cada sección (INICIO, CATEGORIAS, USUARIO...). No se si me habréis entendido porque se que me explico bastante mal, pero yo lo intento.. jeje
Os dejo el código del menú y del jQuery que he hecho.
Código HTML:
<ul class="UlMenu">
<li style="list-style: url(style/img/home.png);">INICIO
<ul>
<li>Quien soy?</li>
<li>Mallorca</li>
</ul>
</li>
<li style="list-style: url(style/img/cat.png);">CATEGORIAS
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
</li>
<li style="list-style: url(style/img/user.png);">USUARIO
<ul>
<form method="post" id="login" name="login" id="FrLogin">
<label>Nombre</label><input type="text" tabindex="0" name="nombre">
<label>Contrasenya</label><input type="text" tabindex="1" name="pass" />
<button type="submit" tabindex="2" name="submit" onclick="php/login.php">Entrar</button>
</form>
</ul>
</li>
</ul>
Código:
$(document).ready(function(){
$(".UlMenu li:has(ul)").click(function(e){
if ($(this).find('ul').css('display') == 'none'){
$(this).find('ul').slideDown(500);
} else {
$(this).find('ul').slideUp(500);
}
});
})