Foros del Web » Programando para Internet » Javascript » Frameworks JS »

menu desplegable

Estas en el tema de menu desplegable en el foro de Frameworks JS en Foros del Web. Buenas a todos, el problema que tengo es con este fragmento de código el cual me funciona pero no como esperaba que funcionara lo que ...
  #1 (permalink)  
Antiguo 12/06/2012, 06:54
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 10 meses
Puntos: 1
Busqueda menu desplegable

Buenas a todos, el problema que tengo es con este fragmento de código el cual me funciona pero no como esperaba que funcionara lo que ando buscando es que al presionar la primera opción se desplegare la respuesta solo de esta opción pero si doy clic en la segunda que se cierra la primera y se despliegue la segunda, esto es lo que quiero hacer pero el código me desplegar ambas respuesta al dar clic a cual quier opción... si me pueden ayudar este es el codigo

Código:
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
.panel,flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
height:100px;
width: 100px;
display:none;
}
</style>
</head>
 
<body>

<p class="flip">opcion 1</p> 
 
<div class="panel">
respuesta
</div>
<br/>
<p class="flip">opcion 2</p>
<div class="panel">
respuesta
</div>
 
</body>
</html>
espero su ayuda
  #2 (permalink)  
Antiguo 12/06/2012, 14:11
 
Fecha de Ingreso: junio-2008
Ubicación: Colombia
Mensajes: 207
Antigüedad: 16 años, 5 meses
Puntos: 12
Respuesta: menu desplegable

en el código tienes que abra todos los paneles que tengan la clase "panel" por eso al dar click se abren todos.

Prueba con esto.

Código Javascript:
Ver original
  1. $('.flip').click(function(){
  2.                 $('.panel').hide(); // oculte todos los paneles
  3.                 $(this).next('div').slideToggle('slow'); // el div que sigue aplique slideToggle
  4.            
  5.             });

Saludos

Etiquetas: ajax, desplegable, funcion, html, jquery, js
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 08:25.