jQuery .toggle () che non funziona con TR in IE

Question

Sto usando levetta di jQuery () per mostrare le righe della tabella / nascondere. Funziona bene in Firefox, ma non funziona in IE 8.

.show() / .hide() lavoro benissimo comunque.

slideToggle () non funziona in IE sia - si mostra per una frazione di secondo e poi scompare di nuovo. Funziona bene in Firefox.

Il mio HTML simile a questo

<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

Ho sperimentato questo stesso errore su TR di nelle tabelle. Ho fatto qualche indagine utilizzando lo strumento debug di script di IE8.

Per prima cosa ho provato ad utilizzare Toggle:

$(classname).toggle();

Questo funziona in FF, ma non IE8.

Allora ho provato questo:

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

Quando ho il debug di questo codice, jquery sempre pensato che fosse visibile. Quindi sarebbe chiuderlo, ma poi non sarebbe mai aprirlo di nuovo.

Ho poi cambiato in questo modo:

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

Che ha funzionato bene. jQuery è avuto un bug in esso o forse il mio html è un po 'irregolare. Ad ogni modo, questo riparato il mio problema.

Answer 2

Aggiornamento a jQuery 1.4 risolve questo, mentre io sono a esso, però, l'unico "correzione" in questa pagina, che ha lavorato per me fu la risposta di Dough ragazzo:

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

Answer 3

Rimuovi il periodo dal <tr class=".readOnlyRow"><td>row</td></tr>. La sintassi per la selezione di classe jQuery è quello di anteporre con un periodo, ma non è necessario nel codice HTML.

Answer 4

ho scoperto che, mentre questo non funziona in IE8

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

, ma questo funziona:

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

è venuta l'idea dal link più importanti, postato qui prima

Answer 5

ho risolto questo problema nascondendo i bambini dell'elemento TR.

toggleTr($(".toggletr"));

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

Questo sembra essere ok per FF3.5 / FF3 / IE8 / IE7 / IE6 / Chrome / Safari.

Answer 6

appena incontrato questo me stesso - la soluzione più semplice che ho trovato è quello di verificare la presenza di:

  

: non (: nascosto)

anziché

  

: visibile

poi agire di conseguenza. .

Answer 7

Sembra che questo è stato risolto in JQuery 1.4.

Answer 8

Le tabelle sono un interessante pezzo di html, non seguono le normali regole come gli altri elementi.

sostanzialmente tabelle mostrano come tavoli, ci sono delle regole speciali per le tabelle, ma questo non è stata trattata correttamente nei browser meno recenti a causa della montagne russe di follia che era la guerra dei browser.

In sostanza in vecchie browser tabelle mostrano proprietà sono state minime e il flusso è stato lasciato in gran parte privi di documenti così invece di alterare i valori predefiniti per la tabella / tr / td tag è meglio aggiungere invece e rimuovere la seguente classe e semplicemente alternare la classe stessa on e off sull'attributo del tavolo / 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 ragione di questo è così che è una classe separata viene utilizzato per commutare il quindi nulla sulla tavola stessa viene modificata né qualsiasi delle tabelle proprietà devono essere alterati, display e eventuali proprietà di layout correlate sono conservati anche se il browser non fa così facile dietro le quinte.

Answer 9

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

C'è un bug jQuery che IE8 provoca tutto per valutare a true. Prova sopra

Answer 10

Ho avuto lo stesso problema, ma ho trovato una bella soluzione per rendere il lavoro toggle / slideToggle in tutti i browser.

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

e ora il 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;
});

Il risultato è che slideToggle funziona bene in tutti i browser, ad eccezione di IE8, nel quale sarà uno strano (scivolo incasinato), ma continuerà a funzionare.

Answer 11

Ho notato che a ginocchiera non può funzionare per iPhone se si include mobili jQuery. Se si esegue a ginocchiera (.ready) prima di jQuery Mobile è caricato quindi la sua fine.

Answer 12

perché si stanno avendo li clic su un <a>, è necessario che la funzione restituisce falso.

Answer 13

Ho notato anche questo. Probabilmente si dovrà attivare una classe su ogni td invece. Non hanno ancora provato questa soluzione, quindi fatemi sapere!

Per gli altri -. Questo è specifico per IE8, non 6 o 7

Modifica

Chiaramente non hai provato questo come dimostra il -1, come ho appena fatto con ottimi risultati (nella mia situazione).

CSS

tr.hideme td {display: none}

JS

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