El método jQuery show() restablece las entradas "li" para mostrar: bloque

Tengo una página relativamente simple que tiene un par de entradas LI que quiero poder mostrar al hacer clic. La idea es simular la lógica de PowerPoints donde aparecen grupos de elementos cuando haces clic en la página.El método jQuery show() restablece las entradas "li" para mostrar: bloque

En el "click()" controlador para el elemento padre "div" Tengo:

$(function() { 
    var currentReveal; 
    var currentGroup = 1; 

    currentReveal = $("[class*=Revealed]").hide().length; 
    $("div").click(function() { 
    if (currentReveal != 0) { 
     var revealedElements = $("[class*=Revealed]").filter("[revealgroup='" + 
           currentGroup + "']"); 
     $(revealedElements).show("normal"); 
     currentGroup += 1; 
     currentReveal -= revealedElements.length; 
    } 
});

El HTML que esto está actuando en es:

<div class="Body"> 
    <ul> 

    <li>Lorem Ipsus</li> 
    <ul> 
     <li class="RevealedList" revealgroup="1" >Lorem Ipsus:</li> 
     <ul class="Revealed" revealgroup="1"> 
      <li>Lorem Ipsus.</li> 
      <li>Lorem Ipsus.</li> 
     </ul> 
     <li class="RevealedList" revealgroup="1">Lorem Ipsus</li> 
    </ul> 
    </div>

Por desgracia, cuando el espectáculo () el comando termina de ejecutarse, la entrada "li" tiene un estilo de "display: block" y no un estilo de "display: list-item" (verificado con firebug e IE). Sé que puedo solucionar este problema trivialmente (actualizando el código para corregir el estilo después de que se haya completado el método "show()"), pero me gustaría saber qué estoy haciendo mal.

Fuente

2009-11-25 Larry Osterman

Hmmm ... Acabo de ver la base de datos de errores jQuerys y encontré: http://dev.jquery.com/ticket/5130, lo que implica que podría tratarse de un error de jQuery. –

Acabo de actualizar el ticket con una corrección: http://dev.jquery.com/ticket/5130#comment:3 – PetersenDidIt

Gracias petersendidit. –

Al hacer .hide(), sus elementos li consiguen display:hide, por lo que los pone a .show()display:block porque el valor display propiedad anterior se ha perdido. Así que hay dos alternativas:

quitar Revealed -como clases de la li y ponerlos en otro elemento contenedor ul o que es capaz de conseguir display conjunto de block o
En lugar de .show(), tratar usando algo como .css({display:'list-item'})

Probablemente vaya con el segundo.

Si quieres conseguir un efecto .show("normal") -como, se puede hacer algo como

// assume the following var 
var yourstuff = $(/* the stuff you're hiding */); 

// instead of just calling .hide(), store width and height first 
yourstuff.each(function() { 
    $(this).data('orig_w',$(this).width()) 
     .data('orig_h',$(this).height()) 
}).hide() 

// then, instead of resetting 'display', animate the stuff 
yourstuff.css({display:'list-item', overflow: 'hidden', width:0, height: 0;}) 
    .animate({width: yourstuff.data('orig_w'), height: yourstuff.data('orig_h')}, 
    "normal", //speed 
    "linear", //easing 
    function() { // in the end, reset 'overflow' to show the bullet 
     yourstuff.css('overflow', 'none'); 
    })

espero que el fragmento anterior sea suficiente para darle una idea de qué hacer.

Fuente

2009-11-25 00:27:33

IIRC, este es un error conocido y debe corregirse en una de las siguientes versiones de jQuery. – keithjgrant

Miguel: Me gustaría obtener el efecto de animación que obtengo con .show ("normal") :(. Veré si puedo poner las cosas reveladas en el ul. –

respuesta editada para dar paso a mejor emular .show() con la animación thingy –

@Larry & @Miguel:

acabo de probar esto con un simple script que hide() s y show() es mi <li> s, y fueron puestos de nuevo a "elemento de lista". De hecho, si nos fijamos en el código fuente de jQuery, en el método show(), verá:

jQuery.fn.extend({ 
show: function(speed,callback){ 
/* ... */ 
var old = jQuery.data(this[i], "olddisplay"); 
/* ... */ 
jQuery.data(this[i], "olddisplay", display);

Y si nos fijamos en el método hide(), tendrá que realmente guarda el valor o display antes de que ninguno :

var old = jQuery.data(this[i], "olddisplay"); 
if (!old && old !== "none") 
    jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));

el código que utiliza para probar con Firebug:

<script type="text/javascript"> 
    $(function() { 
     $("li").click(function() { 
     $("li").hide(); 
     $("li").show();}) 
    }); 
</script> 

<body> 
    <ul> 
     <li>foo</li> 
     <li>foo</li> 
    </ul> 
</body>

¿seguro de que puede confirmar el problema ar e hablando? Quizás hay algo importante que no entendí o que no nos dijiste.

¡Buena suerte!

Fuente

2009-11-25 00:37:11

La pantalla se está configurando a "bloque" en show - el código "if (display ===" none ") display =" block " ; se está ejecutando. Creo que el código en esta ubicación debe ser el código que describió anteriormente (jQuery.data (this ...). –

Puede intentar establecer algunos puntos de interrupción en jQuery para ver exactamente qué está sucediendo. ¡Inténtelo! Es bastante interesante. –

@Larry: en realidad, la línea que resaltaste no es importante. El estilo de visualización de los elementos 'li' en el código que te he mostrado se establece alrededor de 10 líneas antes de lo que resaltaste:' var old = jQuery. datos (esto [i], "olddisplay"); esto [i] .style.display = viejo || ""; 'Después de esto, SI no pudo restablecer la visualización al valor' olddisplay', ENTONCES lo configurará para bloquear, como el código que ha resaltado. No en el caso del código que te he mostrado ... –

Soy consciente de que un par de años, pero me encontré con esto hoy:

jQuery .show() y .hide()devuelves la correcta visualización de la propiedad del elemento <li>, pero sólo cuando no lo anima.

Es decir, simplemente llamando a .hide() y .show() se restaurará a list-item.

Pero al llamar a .show(250) se restaurará a block.

Fuente

2011-11-15 10:09:57 mark

El método jQuery show() restablece las entradas "li" para mostrar: bloque

Respuesta

Cuestiones relacionadas