JavaScript - Duda Menu desplegable

   
Vista:

Duda Menu desplegable

Publicado por Juan Carlos (1 intervención) el 07/02/2011 15:10:27
Hola, resulta que tengo una web (wwwpuntoinvesthogarpuntocom, en la cual hay un menu desplegable, la cuestion es que cuando pulso sobre alguna de las opciones, este menu se despliega a la perfeccion, mostrando el contenido deseado, y cuando pulsas en otro elemento del menu diferente, se repliega el anterior contenido para desplegarse el nuevo.

Mi problema (llamemosle asi) es que quisiera que cuando vuelves a pulsar en el elemento activo, este se repliegue, Teniendo 2 eventos diferentes:
- Click cuando esta activo.
- Click cuando esta inactivo.

El codigo javascript q tengo ahora mismo es el siguiente (creo que este codigo es el que maneja estos eventos)

$(function(){
var expand=function(dd){
$('#content>dd').slideUp()
dd.slideDown()
}
$('#content dt:not(.active)').live('click',function(){
$(this).find('a').href='javascript:void'
var dt=this
$('dt',dt.parentNode).removeClass('active')
$('a[rel=privacy]').removeClass('blocked')
$(dt).addClass('active')
expand($(dt).next())
return false
})
$('a[rel=privacy]:not(.blocked)').live('click',function(){
this.href='javascript:void'
$('#content dt').removeClass('active')
expand($('dd#privacy'))
$(this).addClass('blocked')
return false
})


Espero que me seais de ayuda, ya que no controlo mucho este lenguaje y no se como meterle mano a esto, que imagino que para alguien experimentado puede llegar a ser una chorrada.

Mil gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:Duda Menu desplegable

Publicado por nkox (13 intervenciones) el 08/02/2011 02:05:44
Hola:
Lo que quieres hacer se llama menú acordión (accordion menu).

Prueba con:

$(function(){
$("#content dt:first").addClass('active');
$("#content dd:not(:first)").hide();

$('#content dt').click(function(){
$(this).next("dd").slideToggle().siblings("dd:visible").slideUp();
//$(this).toggleClass("active");
});
/*
var expand=function(dd){
$('#content>dd').slideUp()
dd.slideDown()
}

$('#content dt:not(.active)').live('click',function(){
$(this).find('a').href='javascript:void'

var dt=this
$('dt',dt.parentNode).removeClass('active')
$('a[rel=privacy]').removeClass('blocked')
$(dt).addClass('active')
expand($(dt).next())
return false
});
*/
....
});

Si quieres prueba cambiando la línea:
$(this).next("dd").slideToggle().siblings("dd:visible").slideUp();

por
$(this).next("dd").slideToggle();

Para que veas cual te acomoda más.

Saludos

P.D: probado en Firefox 3.6.8
P.D: revisa: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar