jQuery - alternar verticalmente (es decir, no hacia abajo)

Necesito crear un alternar que se anime hacia arriba, no hacia abajo, en otras palabras, al revés de la opción "normal". Tal vez más simple es que la palanca se deslice hacia arriba sobre el elemento del menú (es un menú) para volverse visible en lugar de deslizarse hacia abajo como lo haría la diapositiva normal, etc. Estoy cerca de allí con esto:jQuery - alternar verticalmente (es decir, no hacia abajo)

var opened = false; 
$("#coltab li").click(function(){ 
    if(opened){ 
     $(this).children('ul').animate({"top": "+=300px"}); 
    } else { 
     $(this).children('ul').animate({"top": "-=300px"}); 
    } 
    $(this).children('ul').children().slideToggle('slow'); 
    $(this).children('ul').toggle(); 
    opened = opened ? false : true; 
});

PERO si "cambiar" un elemento luego otro elemento del segundo elemento (se desliza hacia abajo) cae por la 300px se desliza hacia arriba (aumenta) por 300 px. Un buen ejemplo (odio el sitio) de lo que quiero lograr es http://market.weogeo.com/#/home y las "pestañas" en la parte inferior.

Mi código HTML está utilizando

<ul id="#coltab"> 
<li>Item 1 
<ul> 
<li>This bit needs to toggle up</li> 
</ul> 
</li> 
<li>Item 2 
<ul> 
<li>This bit needs to toggle up</li> 
</ul> 
</li> 
etc ... 
</ul>

En el lado CSS

ul#coltab { position: relative' blah; blah; }

ul#coltab ul { display: none; position: absolute; blah; blah; }

¿Alguna idea?

Sería bueno si cada "clic" cerrara la palanca anterior antes de abrir la opción "hacer clic".

Fuente

2011-01-01 Russell Parrott

Aquí está mi versión de edición de las que se publican a continuación: D http://jsfiddle.net/s7AD8/2/ – Cristy

@Cristy Ohhh Te odio :-) eso es "correcto" y mucho de lo que "he creado", pero me da para que funcione solo con slideToggle, sin necesidad de la animación, a menos que me falta algo? –

Sí, no hay necesidad de animar, acabo de usar eso porque el ejemplo publicado debajo lo usé :)) – Cristy

Podría dar una respuesta más específica si hubiera proporcionado el CSS real para sus listas en lugar de relleno.

Básicamente, querrá establecer la propiedad bottom de ul#coltab ul en 0.

ejemplo genérico:http://jsfiddle.net/s7AD8/

ul#coltab ul { 
    position:absolute; 
    bottom:0; 
    /*...and so on*/ 
}

Esto hará que animar en una dirección ascendente.

Fuente

2011-01-01 15:36:46 user113716

@patrick dw - oops, lo siento por esa posición es absoluta; abajo: 0px; –

@Russell: Eso debería funcionar. Agregué un ejemplo genérico para demostrar la animación ascendente. Si el suyo no hace eso con 'bottom: 0', entonces deberá proporcionar el código necesario para reproducir el problema. – user113716

@patrick dw - Gracias "estado allí" Creo que podría ser el hecho de que está en el código de ul pero aquí está el código:

Características
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed neque eu est consequat scelerisque sit amet ac orci.
Blog
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ul # coltab ul {display: none; posición: absoluta; índice z: 998; margen: 0px; abajo: 0px; relleno: 0px; lista-estilo: ninguno; } –

"- = 300px" se sentiría mejor ser un var precalculada .. (incluso se puede manejar cálculos en cadenas?)

Además si desea manipulado de forma independiente me imagino que tendrá una gran parte Tiempo más fácil proporcionando ID para las piezas que desea manejar

Fuente

2011-01-01 15:31:49 Mantar

sí +/- = 300px sería mejor como var precalculado, PERO como el UL no se muestra ninguno hasta que se alterna no tiene altura para que (OK no puedo) altura(); para precalcularlo Si eso se puede hacer, en general, me encantaría saber y aprender. Gracias por comentar –

* "¿Puedes manejar cálculos en cadenas?" * Sí, jQuery te permite hacer esto en animaciones. – user113716

@Patrick: Ya veo ... Eso sí me da algunas opciones nuevas en mi proyecto ^^ Gracias – Mantar

Prueba con esto:

$("#coltab li ul").each(function (index) { 
    $(this).data('height', $(this).outerHeight());  
}); 

$("#coltab li").click(function() { 

    $("#coltab li ul.open").animate({"top": 0}, function() { 
     $(this).removeClass('open'); 
    }); 

    var itemHeight = $(this).children('ul').data('height'); 
    $(this).find('ul:not(.open)').animate({"top": -itemHeight}).addClass('open'); 

});

y añadir una nueva clase css:

#coltab ul.open { display: block; }

Test it here

Fuente

2011-01-01 16:06:41 steffenbew

He visto .data (''); antes pero no estoy seguro de qué se trata, pero según tu ejemplo, puedo adivinar que mide la altura del "contenido" o datos, pero incluso if css display none? –

Eche un vistazo a la documentación: http://api.jquery.com/jQuery.data/ - "Almacenar datos arbitrarios asociados con el elemento especificado." | Por lo tanto, este fragmento de código está almacenando la altura original de los elementos que se deben alternar, para animar a la posición superior apropiada más tarde. – steffenbew

Esto es PERFECTO. +1. –

También se puede utilizar de una manera diferente si necesita liberar ul y li para otra cosa:

<style> 
body { margin: 100px 50px; } 

#coltab { position: relative; text-align: center; } 

#coltab > li { 
    background: #ccc; 
    color: #444; 
    cursor: pointer; 
    display: block; 
    float: left; 
    margin: 0 10px; 
    padding: 10px 20px; 
    position: relative; 
    width: 100px; 
} 

#coltab span { 
    background: #eee; 
    color: #222; 
    display: none; 
    padding: 5px; 
    position: absolute; 
    left: 0; 
    right; 0; 
    top: 0; 
    z-index: -1; 
} 

#coltab span.open { display: block; } 

</style> 

<head> 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"> </script> 

</head> 

<body> 



<div id="coltab"> 
    <li>Item 1<br/>(click me) 
      <span>This first item needs to toggle up</span> 
    </li> 
    <li>Item 2<br/>(click me) 
      <span>This second item needs to toggle up</span> 
    </li> 
</div> 

<script> 
$(document).ready(function() { 
$("#coltab li span").each(function (index) { 
    $(this).data('height', $(this).outerHeight());  
}); 

$("#coltab li").click(function() { 

    $("#coltab li span.open").animate({"top": 0}, function() { 
     $(this).removeClass('open'); 
    }); 

    var itemHeight = $(this).children('span').data('height'); 
    $(this).find('span:not(.open)').animate({"top": -itemHeight}).addClass('open'); 

}); 
}); 
</script> 
</body>

Fuente

2011-03-03 23:54:55 SnTYaD

jQuery - alternar verticalmente (es decir, no hacia abajo)

Respuesta

Cuestiones relacionadas