Ayuda con un menú

[flacc]

haha ya entendi pero no puedo ayudarte, esta todo muy liado con el code de jquery, pero estoy casi seguro de que se puede lograr casi lo mismo con css3 y html 

[#!drvy]

Hola, la verdad es que me rompí la cabeza hasta que me di cuenta del fallo tonto este  
Esta mal hecho porque actúa ante un click general en el div en el que se aloja, en vez de en un área concreto.

Te dejo el JS con la solución y la lineas corregidas para que lo veas.

Código (javascript,13,15) [Seleccionar] Expandir


$(document).ready(function(){
/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
titulos de cada uno de esos bloques*/
$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
borde inferior*/
$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
se muestren cerrados (sin la clase clsActivo)*/
$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');

/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
$('.clsContenedor span').click(function(){
/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
$(this).next().find('ul').stop(true,false).slideToggle('fast',function(){
//verificar la clase que tiene el titulo del contenedor
if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
}else{
//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
}
});
});

});


En vez de esperar a un click general del la clase .clsContenedor, este esperara a una click de un span que se aloje en un elemento que tenga esa clase. Así no actúa sobre todo el div, sino solo sobre el titulo.

La linea 15 he añadido el next(), para que seleccione el siguiente y así no se confunda consigo mismo xD.

También, te recomiendo que le añadas al CSS una linea con el siguiente contenido.

Código (css) [Seleccionar] Expandir

.clsContenedor ul li a {outline:none !important;}

La razón es, que al no cerrarse (que es lo que queremos), deja el focus sobre el link y queda un tanto feo.

Espero que te haya ayudado.

EDIT: Ahora si que me tengo que romper la cabeza por no leer a fondo el comentario de @lipman 

Saludos

[Spider-Net]

haha ya entendi pero no puedo ayudarte, esta todo muy liado con el code de jquery, pero estoy casi seguro de que se puede lograr casi lo mismo con css3 y html 

Que está todo muy liado? Está todo perfectamente identado, organizado y comentado. Que tú no lo entiendas no quiere decir que esté liado xD

[chocola]

Hola, la verdad es que me rompí la cabeza hasta que me di cuenta del fallo tonto este  
Esta mal hecho porque actúa ante un click general en el div en el que se aloja, en vez de en un área concreto.

Te dejo el JS con la solución y la lineas corregidas para que lo veas.

Código (javascript,13,15) [Seleccionar] Expandir


$(document).ready(function(){
/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
titulos de cada uno de esos bloques*/
$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
borde inferior*/
$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
se muestren cerrados (sin la clase clsActivo)*/
$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');

/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
$('.clsContenedor span').click(function(){
/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
$(this).next().find('ul').stop(true,false).slideToggle('fast',function(){
//verificar la clase que tiene el titulo del contenedor
if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
}else{
//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
}
});
});

});


En vez de esperar a un click general del la clase .clsContenedor, este esperara a una click de un span que se aloje en un elemento que tenga esa clase. Así no actúa sobre todo el div, sino solo sobre el titulo.

La linea 15 he añadido el next(), para que seleccione el siguiente y así no se confunda consigo mismo xD.

También, te recomiendo que le añadas al CSS una linea con el siguiente contenido.

Código (css) [Seleccionar] Expandir

.clsContenedor ul li a {outline:none !important;}

La razón es, que al no cerrarse (que es lo que queremos), deja el focus sobre el link y queda un tanto feo.

Espero que te haya ayudado.

EDIT: Ahora si que me tengo que romper la cabeza por no leer a fondo el comentario de @lipman 

Saludos

He modificado el JS Y he añadido la linea a CSS y no me funciona, no hace nada cuando le doy a clic.
Creo que no acepta en la linea 15  el "clsContenedor span".

[#!drvy]

Copialo tal y como esta y ponlo en un archivo nuevo reemplazando al viejo.


Saludos

[flacc]

me referia a liado para mi, estoy a costumbrado a leer el code tal cual sin comentarios  , solo el code habla por si solo para mi pero no se js asi que me lia 

[chocola]

Copialo tal y como esta y ponlo en un archivo nuevo reemplazando al viejo.


Saludos

No  funciona

[#!drvy]

Haha, fallo mio... le deje con el find(ul) y dentro del span no hay ningún ul   .

Prueba asi:

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
titulos de cada uno de esos bloques*/
$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
borde inferior*/
$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
se muestren cerrados (sin la clase clsActivo)*/
$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');

/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
$('.clsContenedor span').click(function(){
/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
$(this).next().stop(true,false).slideToggle('fast',function(){
//verificar la clase que tiene el titulo del contenedor
if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
}else{
//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
}
});
});

});


La linea esa del css también modifica la si no lo has hecho.
PD:

Te lo dejo online por si quieres verlo xD

Código [Seleccionar] Expandir

http://drvy.net/dev/menuEHN/

Saludos

[chocola]

Muchas gracias