jQuery .Toggle () ne travaillant pas avec TRS dans IE

StackOverflow https://stackoverflow.com/questions/975153

  •  13-09-2019
  •  | 
  •  

Question

J'utilise JQuery's Toggle () pour afficher / masquer les lignes de table. Cela fonctionne bien dans Firefox mais ne fonctionne pas dans IE 8.

.show()/.hide() fonctionne bien cependant.

slidetoggle () Ne fonctionne pas non plus dans IE - il se manifeste pendant une fraction de seconde puis disparaît à nouveau. Fonctionne bien dans Firefox.

Mon HTML ressemble à cela

<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>

Javascrip

$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle();  
    });  
});
Était-ce utile?

La solution

J'ai vécu cette même erreur sur les tables TR. J'ai fait une enquête en utilisant l'outil de débogage du script d'IE8.

J'ai d'abord essayé d'utiliser des bascules:

$(classname).toggle();

Cela fonctionne en FF mais pas IE8.

J'ai alors essayé ceci:

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

Lorsque j'ai débogué ce code, JQuery a toujours pensé qu'elle était visible. Donc, cela le fermerait mais il ne l'ouvrirait jamais.

Je l'ai ensuite changé pour ceci:

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

Cela a bien fonctionné. jQuery a un bug là ou peut-être que mon HTML est un peu vissé. Quoi qu'il en soit, cela a résolu mon problème.

Autres conseils

La mise à niveau vers JQuery 1.4 corrige ceci, alors que je suis cependant là, la seule "corrective" sur cette page qui a fonctionné pour moi était la réponse de Dough Boy:

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

Supprimer la période de votre <tr class=".readOnlyRow"><td>row</td></tr>. La syntaxe pour la sélection de la classe jQuery est de la prétendre avec une période, mais vous n'en avez pas besoin dans votre code HTML.

J'ai trouvé que même si cela ne fonctionne pas dans IE8

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

Mais cela fonctionne:

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

J'ai l'idée du lien que Jast a publié ici avant

J'ai résolu ce problème en cachant les enfants de l'élément TR.

toggleTr($(".toggletr"));

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

Cela semble être OK pour FF3.5 / FF3 / IE8 / IE7 / IE6 / Chrome / Safari.

Je viens de rencontrer cela moi-même - la solution la plus simple que j'ai trouvée est de vérifier:

:Pas caché)

à la place de

:visible

alors agissez en conséquence. .

On dirait que cela a été corrigé dans jQuery 1.4.

Les tables sont un morceau intéressant de HTML, ils ne suivent pas les règles normales comme d'autres éléments.

Fondamentalement, les tables s'affichent sous forme de tables, il existe des règles spéciales pour les tables, mais cela n'a pas été traité correctement dans les navigateurs plus anciens en raison des montagnes russes de folie qui étaient les guerres du navigateur.

Essentiellement, dans les tables plus anciennes, les propriétés d'affichage étaient minimes et le flux a été largement sans papiers, donc au lieu de modifier les valeurs prédéfinies pour la balise Table / TR / TD, il est préférable d'ajouter et de supprimer la classe suivante et de simplement basculer la classe elle-même et désactiver sur l'attribut de la table / 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 raison en est qu'il s'agit d'une classe distincte utilisée pour basculer l'affichage, donc rien sur le tableau lui-même n'est modifié et aucune des propriétés de tableaux ne doit être modifiée, l'affichage et les propriétés de mise en page connexes sont préservées même si le Le navigateur ne facilite pas les coulisses.

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

Il y a un bogue jQuery que IE8 fait que tout évalue à TRUE. Essayer ci-dessus

J'ai eu le même problème, mais j'ai trouvé une belle solution à faire à faire toggle/slideToggle travailler dans tous les navigateurs.

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

Et maintenant le 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;
});

Le résultat est que slideToggle Fonctionne bien dans tous les navigateurs, à l'exception de IE8, dans lequel aura l'air bizarre (diapositive gâchée), mais cela fonctionnera toujours.

J'ai remarqué que Toggle peut ne pas fonctionner pour iPhone si vous incluez jQuery Mobile. Si vous exécutez Toggle (.ready) avant que JQuery Mobile ne soit chargé, c'est bien.

Parce que vous les faites cliquer sur un <a>, vous avez besoin de la fonction pour retourner faux.

J'ai aussi remarqué cela. Vous devrez probablement basculer une classe sur chaque TD à la place. Je n'ai pas encore essayé cette solution, alors faites-le moi savoir!

Pour d'autres - cela est spécifique à IE8, pas à 6 ou 7.

ÉDITER

De toute évidence, vous n'avez pas essayé cela comme en témoigne le -1, comme je l'ai fait avec de bons résultats (dans ma situation).

CSS

tr.hideme td {affichage: aucun}

Js

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top