jQuery .toggle () no funciona con TRS en IE

Question

Estoy usando el toggle () de jQuery para mostrar/ocultar filas de mesa. Funciona bien en Firefox pero no funciona en IE 8.

.show()/.hide() Sin embargo, funciona bien.

slidEtoggle () Tampoco funciona en IE, se nota por una fracción de segundo y luego desaparece nuevamente. Funciona bien en Firefox.

Mi HTML se parece a esto

<a id="readOnlyRowsToggle">Click</a>  
<table>  
  <tr><td>row</td></tr>  
  <tr><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
</table>

Javascript

$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle();  
    });  
});  

Answer 1

He experimentado este mismo error en TR en tablas. Investigué alguna investigación utilizando la herramienta de depuración de script de IE8.

Primero intenté usar alternar:

$(classname).toggle();

Esto funciona en FF pero no IE8.

Luego probé esto:

if($(classname).is(":visible"))//IE8 always evaluates to true.
     $(classname).hide();
else
     $(classname).show();

Cuando depugé este código, JQuery siempre pensó que era visible. Entonces lo cerraría, pero entonces nunca lo abriría.

Luego lo cambié a esto:

var elem = $(classname)[0];
if(elem.style.display == 'none')
     $(classname).show();
else
{
     $(classname).hide();               
}

Eso funcionó bien. JQuery tiene un insecto en él o tal vez mi HTML está un poco jodido. De cualquier manera, esto solucionó mi problema.

Answer 2

Actualización a jQuery 1.4 soluciona esto, mientras que estoy en eso, la única "solución" en esta página que funcionó para mí fue la respuesta de Dough Boy:

$(document).ready(function() {  
  $(".readOnlyRow").hide();  
  $("#readOnlyRowsToggle").click(function() {  
    $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
  });  
});

Answer 3

Eliminar el período de su <tr class=".readOnlyRow"><td>row</td></tr>. La sintaxis para la selección de la clase jQuery es para preverlo con un período, pero no la necesita en su código HTML.

Answer 4

Descubrí que si bien esto no funciona en IE8

$('.tableRowToToggle').toggle();

Pero esto funciona:

$('.tableRowToToggle').each(function(){this.toggle()});

Tengo la idea del enlace que Jast publicó aquí antes

Answer 5

Arreglé este problema ocultando a los niños del elemento TR.

toggleTr($(".toggletr"));

function toggleTr(el) {
    $(el).children('td').each(function() {
        $(this).toggle();
    });
}

Esto parece estar bien para FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari.

Answer 6

Me acabo de encontrar yo mismo: la solución más fácil que he encontrado es verificar:

: no (: oculto)

en vez de

:visible

luego actuar en consecuencia. .

Answer 7

Parece que esto se ha solucionado en jQuery 1.4.

Answer 8

Las tablas son una pieza interesante de HTML, no siguen las reglas normales como otros elementos.

Básicamente, las tablas se muestran como tablas, existen reglas especiales para las tablas, pero esto no se trató correctamente en los navegadores más antiguos debido a la montaña rusa de locura que fueron las guerras del navegador.

Esencialmente en los navegadores más antiguos, las propiedades de visualización de tablas fueron mínimas y el flujo se dejó en gran medida indocumentado, por lo que en lugar de alterar valores predefinidos para la etiqueta Tabla/TR/TD, es mejor agregar y eliminar la siguiente clase y simplemente activar la clase en sí misma. en el atributo de la tabla/tr/td.

.tableHide {
    display: none;
}

<table>
<tr><td> Visible content</td></tr>
<tr><td> Visible content</td> <td class="**tableHide**"> **Hidden Content**</td></tr>
</table>

La razón de esto es para que se esté utilizando una clase separada para alternar la pantalla, por lo tanto, nada en la tabla en sí se cambia ni se debe alterar ninguna de las propiedades de las tablas, y cualquier propiedad de diseño relacionada se conserva incluso si se conservan las propiedades de diseño. El navegador no lo hace más fácil detrás de escena.

Answer 9

$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
    });  
});

Hay un error jQuery que IE8 hace que todo evalúe a verdad. Probar arriba

Answer 10

Tuve el mismo problema, pero encontré una buena solución para hacer toggle/slideToggle trabajar en todos los navegadores.

<a id="myButton">Click</a>
<div id="myDiv" display="none">lorem ipsum .... text ....</div>  

Y ahora el JS:

    jQuery("#myButton").click(function () {
  var currentDisplay = jQuery("#myDiv").css("display"); // save the current Display value
  jQuery(#myDiv).slideToggle("fast", function () { // lets do a nice slideToggle
    // this code will run AFTER the sildeToggle is done
    // so if slideToggle worked fine (in FF, chrome, ...) this will have no evect, since the value is already block or none
    // but in case IE 8 runs this script, it will set the css display to the current value
    if (currentDisplay == "none") {
      jQuery(#myDiv).css('display', 'block');
    }else {
      jQuery(#myDiv).css('display', 'none');
        }
    });
    return false;
});

El resultado es que slideToggle Funciona bien en todos los navegadores, excepto IE8, en el que se verá extraño (deslizamiento desordenado), pero aún funcionará.

Answer 11

He notado que Toggle puede no funcionar para iPhone si incluye jQuery Mobile. Si ejecuta alternar (.

Answer 12

Porque estás haciendo que hagan clic en un <a>, necesita la función para devolver falso.

Answer 13

He notado esto también. Es probable que tenga que alternar una clase en cada TD. Aún no he probado esta solución, ¡así que avísame!

Para otros: esto es específico de IE8, no 6 o 7.

EDITAR

Claramente, no probaste esto como lo demuestra el -1, como acabo de hacer con buenos resultados (en mi situación).

CSS

tr.hideme td {display: none}

Js

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});