horizontal - slidetoggle jquery ejemplo

cambiar el comportamiento slideToggle() para visualizar: inline-block en lugar de display: block?

Question

mi target slideToggle() div necesita display:inline-block lugar de display:block cuando está abierto. ¿Hay alguna manera de cambiar el comportamiento de jquery aquí?

Editar:

Estoy usando jQuery 1.7.0 en este momento. Además, el <div> está inicialmente en la display:none y debe expandirse para display:inline-block después de hacer clic en un enlace; pero aparentemente el estado predeterminado para slideToggle () en esta situación es display:block ...

Answer 1

¿Estás en una versión anterior de jQuery? Esto debería haberse arreglado ya, vea la discusión aquí:

http://bugs.jquery.com/ticket/2185

Answer 2

Intenta ocultar tu bloque mediante scripts (no display:none través de los estilos)

HTML

<div class="ib">inline-block</div> <a href="#" class="toggle">toggle this</a>

CSS

.ib{
    display:inline-block;
    background:red;
}

JavaScript

$(".ib").hide();
$(".toggle").bind("click", function(){
    $(".ib").slideToggle();
    return false;
})

example

Answer 3

Si te encuentras viendo un "Flash de contenido sin estilo" no deseado, también puedes usar un estilo en línea. La sabiduría habitual de "no poner estilo en línea" está realmente destinada a su estilo principal, no a los efectos visuales (todos los efectos JS simplemente agregan estilos en línea después de todo).

Por supuesto, el contenido no será visto por arañas de motor de búsqueda con discapacidad JS, si eso es importante. Si no es importante, ¡estás bien!

Actualización del violín de @ fliptheweb: http://jsfiddle.net/GregP/pqrdS/3/

Answer 4

Un pequeño pajarito me dijo ...

$(''#my-block'').slideToggle(''medium'', function() {
    if ($(this).is('':visible''))
        $(this).css(''display'',''inline-block'');
});