Foros del Web » Programando para Internet » Javascript »

Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de la lista

Estas en el tema de Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de la lista en el foro de Javascript en Foros del Web. Buenas tardes, Tengo un pequeño proyecto web entre manos y me estoy quedando loco con algo que en principio era fácil. Estoy haciendo un panel ...
  #1 (permalink)  
Antiguo 24/02/2012, 08:42
 
Fecha de Ingreso: febrero-2010
Mensajes: 4
Antigüedad: 12 años, 9 meses
Puntos: 0
Exclamación Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de la lista

Buenas tardes,

Tengo un pequeño proyecto web entre manos y me estoy quedando loco con algo que en principio era fácil.

Estoy haciendo un panel de navegación en el que tengo unas categorías padre y unos hijos que quiero que se muestren al hacer click en el padre y se oculten si pulsas en otro padre. Es decir, algo así:

_ Categoría Padre 1
____ Categoría Hija 1A
____ Categoría Hija 1B
_ Categoría Padre 2
____ Categoría Padre 2A
_ Categoría Padre 3
____ Categoría Hija 3A
____ Categoría Hija 3B

Me gustaría que quedase de tal forma que al pulsar en "Categoría Padre 1", mostrase:

_ Categoría Padre 1
____ Categoría Hija 1A
____ Categoría Hija 1B
_ Categoría Padre 2
_ Categoría Padre 3

y por ejemplo, si pulsamos en "Categoría Padre 2" nos quedara:

_ Categoría Padre 1
_ Categoría Padre 2
____ Categoría Padre 2A
_ Categoría Padre 3

Lo único que he conseguido hacer es que al pulsar sobre una se abra y muestre los hijos, pero no hay narices a que se cierre al pulsar sobre otra categoría padre...

¿Alguna idea? Mil gracias de antemano.
  #2 (permalink)  
Antiguo 24/02/2012, 12:18
 
Fecha de Ingreso: febrero-2010
Mensajes: 4
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de

He de decir que supongo que será tan sencillo cómo asignar al segundo enlace el mismo que hace que oculta el texto o enlace en el típico código de "mostrar/ocultar" para los otros dos enlaces... pero no tengo ni idea de cómo hacerlo.

Gracias.
  #3 (permalink)  
Antiguo 24/02/2012, 12:38
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 10 años, 11 meses
Puntos: 59
Respuesta: Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de

mira esto puede que te sirva
http://www.davidrojas.net/index.php/...-css-y-jquery/
__________________
PD gracias por el karma
  #4 (permalink)  
Antiguo 25/02/2012, 02:58
 
Fecha de Ingreso: febrero-2010
Mensajes: 4
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de

Cita:
Iniciado por madhatterdef Ver Mensaje
mira esto puede que te sirva
[url]http://www.davidrojas.net/index.php/diseno-web/menu-vertical-en-acordeon-con-css-y-jquery/[/url]
¡Perfecto! Era exactamente lo que buscaba y funciona de lujo.

Por rizar el rizo un poco, ¿podríamos hacer que dependiendo de la URL en la que estés mostrase un menú ya extendido?

Es decir, si yo tengo la Categoría 1 con 3 hijos y la Categoría 2 con 2 hijos, al entrar en la URL de la Categoría 1 que se me viesen los 3 hijos sin necesidad de pulsar.

Gracias
  #5 (permalink)  
Antiguo 25/02/2012, 06:19
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años, 5 meses
Puntos: 1011
Respuesta: Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de

primero decir que me parece exagerado usar jquery para hacer algo tan simple
Cita:
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
Cita:
var visto_subm = null;
var visto_color = null;
function ver(val) {
objhl = document.getElementById(val);
obj = document.getElementById(val + '_opcion');

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) && (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}
Cita:
<div id="menu1" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="menu1_opcion" class="ocultar" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>

<div id="menu2" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="menu2_opcion" class="ocultar" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>


<div id="menu3" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="menu3_opcion" class="ocultar" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>


<div id="menu4" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="menu4_opcion" class="ocultar" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
con respecto a tu pregunta de tu último post. usar window.name que es como las "sesiones" sesiones de otros lenguajes (asp, php, ..)
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: elemento, hijos, lista, pulsar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:37.