Foros del Web » Programando para Internet » Jquery »

Mostrar/ocultar listas JQuery para mejorarlo o hacer Nuevo

Estas en el tema de Mostrar/ocultar listas JQuery para mejorarlo o hacer Nuevo en el foro de Jquery en Foros del Web. Este es un pequeño codigo que hice para ocultar listas dependiendo el año seleccionado mostrara los meses de su lista, debe ocultar las demas listas ...
  #1 (permalink)  
Antiguo 11/03/2013, 11:43
 
Fecha de Ingreso: abril-2010
Ubicación: Cancun
Mensajes: 88
Antigüedad: 14 años, 7 meses
Puntos: 2
Mostrar/ocultar listas JQuery para mejorarlo o hacer Nuevo

Este es un pequeño codigo que hice para ocultar listas dependiendo el año seleccionado mostrara los meses de su lista, debe ocultar las demas listas al mostrar solo una, y cambiar el signo + por - dependiendo

Codigo Html

Código HTML:
<div id="fechaeventos">
<div class="anios">
<div id="2011" class="btn_masmenos">+</div>
Eventos 2011
</div>
<ul id="anio-2011" class="inactivoyear ulanios">
<li class="inactivomonth">Enero</li>
<li class="inactivomonth">Febrero</li>
<li class="inactivomonth">Marzo</li>
<li class="inactivomonth">Abril</li>
<li class="inactivomonth">Mayo</li>
<li class="inactivomonth">Junio</li>
<li class="inactivomonth">Julio</li>
<li class="inactivomonth">Agosto</li>
<li class="inactivomonth">Septiembre</li>
<li class="inactivomonth">Octubre</li>
<li class="inactivomonth">Noviembre</li>
<li class="inactivomonth">Diciembre</li>
</ul>
<div class="anios">
<div id="2010" class="btn_masmenos">-</div>
Eventos 2010
</div>
<ul id="anio-2010" class="activoyear ulanios">
<li class="inactivomonth">Enero</li>
<li class="inactivomonth">Febrero</li>
<li class="inactivomonth">Marzo</li>
<li class="inactivomonth">Abril</li>
<li class="inactivomonth">Mayo</li>
<li class="inactivomonth">Junio</li>
<li class="inactivomonth">Julio</li>
<li class="inactivomonth">Agosto</li>
<li class="inactivomonth">Septiembre</li>
<li class="inactivomonth">Octubre</li>
<li class="inactivomonth">Noviembre</li>
<li class="inactivomonth">Diciembre</li>
</ul>
<div class="anios">
<div id="2009" class="btn_masmenos">+</div>
Eventos 2009
</div>
<ul id="anio-2009" class="inactivoyear ulanios">
<li class="inactivomonth">Enero</li>
<li class="inactivomonth">Febrero</li>
<li class="inactivomonth">Marzo</li>
<li class="inactivomonth">Abril</li>
<li class="inactivomonth">Mayo</li>
<li class="inactivomonth">Junio</li>
<li class="inactivomonth">Julio</li>
<li class="inactivomonth">Agosto</li>
<li class="inactivomonth">Septiembre</li>
<li class="inactivomonth">Octubre</li>
<li class="inactivomonth">Noviembre</li>
<li class="inactivomonth">Diciembre</li>
</ul>
</div> 
Aplico un script para que oculte todos las clases .inactivoyear

Código HTML:
<script>
$(".inactivoyear").hide();
</script> 
y mi codigo Jquery para hacer los eventos para su ejecucion
Código:
$(document).ready(function(){
$(".btn_masmenos").click(function () {
	var v =$(this).attr("id");
	$("#anio-"+v).slideToggle("slow",function(){
		var signo=$("#"+v).html();
		if(signo=="+"){signo="-";$('div.btn_masmenos').not("#"+v).html("+");}
		else{signo="+";}
		$("#"+v).html(signo);
		});
	$(".activoyear").removeClass("activoyear").addClass("inactivoyear")
	$("#anio-"+v).addClass("activoyear")
	$('ul.inactivoyear').not(".activoyear").hide();
	});});

Etiquetas: listas
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 02:15.