JQuery .Toggle () arbeitet nicht mit TRS im IE

Question

Ich verwende JQuery's Toggle (), um Tischreihen anzuzeigen/auszublenden. Es funktioniert gut in Firefox, funktioniert aber in IE 8 nicht.

.show()/.hide() Arbeiten Sie jedoch gut.

Slidetoggle () Funktioniert auch nicht in IE - es zeigt einen Bruchteil Sekunden mehr und verschwindet dann wieder. Funktioniert gut in Firefox.

Mein HTML sieht ähnlich aus wie

<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

Ich habe diesen gleichen Fehler bei TRs in Tabellen erlebt. Ich habe einige Untersuchungen mit dem Skript -Debugging -Tool von IE8 durchgeführt.

Zuerst habe ich versucht, Toggle zu verwenden:

$(classname).toggle();

Das funktioniert in FF, aber nicht in IE8.

Ich habe dann das versucht:

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

Als ich diesen Code debuggierte, dachte JQuery immer, dass er sichtbar war. Also würde es es schließen, aber dann würde es es niemals zurück öffnen.

Ich habe es dann dazu geändert:

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

Das hat gut funktioniert. JQuery hat ein Käfer darin oder vielleicht ist mein html ein wenig verrückt. In jedem Fall hat dies mein Problem behoben.

Answer 2

Das Upgrade auf JQuery 1.4 repariert dies, während ich dabei bin, war das einzige "Fix" auf dieser Seite, der für mich funktioniert hat, die Antwort von Teig Boy:

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

Answer 3

Entfernen Sie den Zeitraum von Ihrem <tr class=".readOnlyRow"><td>row</td></tr>. Die Syntax für die Auswahl von JQuery -Klasse besteht darin, sie mit einem Zeitraum vorzubereiten, aber Sie benötigen sie nicht in Ihrem HTML -Code.

Answer 4

Ich fand, dass dies in IE8 nicht funktioniert, während dies nicht funktioniert

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

Aber das funktioniert:

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

Ich habe die Idee aus dem Link -Jast hier zuvor gepostet

Answer 5

Ich habe dieses Problem behoben, indem ich Kinder des TR -Elements versteckt habe.

toggleTr($(".toggletr"));

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

Dies scheint für FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari in Ordnung zu sein.

Answer 6

Ich habe dies gerade selbst begegnet - die einfachste Lösung, die ich gefunden habe, ist zu überprüfen

:Nicht versteckt)

Anstatt von

:sichtbar

dann entsprechend handeln. .

Answer 7

Es sieht so aus, als wäre dies in JQuery 1.4 behoben worden.

Answer 8

Tische sind ein interessantes Stück HTML, sie folgen nicht normale Regeln als andere Elemente.

Grundsätzlich werden Tabellen als Tabellen angezeigt. Es gibt spezielle Regeln für Tabellen, dies wurde jedoch in älteren Browsern nicht ordnungsgemäß behandelt, da die Browserkriege die Achterbahnfahrt der Verrücktheit waren.

Im Wesentlichen waren in älteren Browsertabellen die Anzeigeeigenschaften minimal und der Fluss wurde weitgehend undokumentiert. Anstatt vordefinierte Werte für das Tabellen-/TR/TD -Tag zu ändern, ist es am besten, stattdessen die folgende Klasse hinzuzufügen und zu entfernen und einfach die Klasse selbst ein- auf dem Attribut der Tabelle/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>

Der Grund dafür ist, dass es sich um eine separate Klasse handelt, die verwendet wird, um das Display zu umschalten, daher wird nichts in der Tabelle selbst geändert, noch muss eine der Tabelleneigenschaften geändert werden, Anzeigen und zugehörige Layouteigenschaften bleiben auch dann erhalten, auch wenn die Browser macht hinter den Kulissen nicht so einfach.

Answer 9

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

Es gibt einen JQuery -Fehler, den IE8 zutreffend bewirkt. Versuchen Sie es oben

Answer 10

Ich hatte das gleiche Problem, aber ich fand eine schöne Problemumgehung zu machen toggle/slideToggle Arbeiten Sie in allen Browsern.

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

Und jetzt der 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;
});

Das Ergebnis ist das slideToggle Funktioniert in allen Browsern gut, außer IE8, in dem eine seltsame (durcheinandergebrachte Folie) aussieht, aber es wird trotzdem funktionieren.

Answer 11

Ich habe festgestellt, dass Toggle möglicherweise nicht für das iPhone funktioniert, wenn Sie JQuery Mobile einbeziehen. Wenn Sie umschalten, bevor JQuery Mobile geladen wird, ist es in Ordnung.

Answer 12

Weil Sie sie klicken lassen auf eine <a>, Sie benötigen die Funktion, um false zurückzugeben.

Answer 13

Ich habe das auch bemerkt. Wahrscheinlich müssen Sie stattdessen eine Klasse auf jedem TD umschalten. Ich habe diese Lösung noch nicht ausprobiert, also lass es mich wissen!

Für andere - dies ist spezifisch für IE8, nicht 6 oder 7.

BEARBEITEN

Offensichtlich haben Sie dies nicht versucht, wie der -1 wie ich gerade mit guten Ergebnissen (in meiner Situation) gezeigt habe.

CSS

tr.hideme td {display: keine}

JS

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