jQuery .toggle () não está trabalhando com TRS no ie

Question

Estou usando o jQuery's Toggle () para mostrar/ocultar linhas de tabela. Funciona bem no Firefox, mas não funciona no IE 8.

.show()/.hide() Funciona bem.

slideToggle () Também não funciona no IE - ele mostra uma fração de segundo e desaparece novamente. Funciona bem no Firefox.

Meu HTML parece semelhante a isso

<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

Eu experimentei esse mesmo erro em TR's em tabelas. Fiz alguma investigação usando a ferramenta de depuração de scripts do IE8.

Primeiro eu tentei usar alternar:

$(classname).toggle();

Isso funciona no FF, mas não IE8.

Eu então tentei o seguinte:

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

Quando depurei esse código, o JQuery sempre pensou que era visível. Então, ele fecharia, mas nunca o abriria de volta.

Eu então mudei para isso:

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

Isso funcionou bem. JQuery tem um inseto nele ou talvez meu HTML seja um pouco de rosca. De qualquer maneira, isso corrigiu meu problema.

Answer 2

A atualização para o jQuery 1.4 corrige isso, enquanto estou nisso, a única "correção" nesta página que funcionou para mim foi a resposta do garoto:

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

Answer 3

Remova o período do seu <tr class=".readOnlyRow"><td>row</td></tr>. A sintaxe para a seleção de classe jQuery é prendê -la com um período, mas você não precisa dela no seu código HTML.

Answer 4

Eu descobri que, embora isso não funcione no IE8

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

Mas isso funciona:

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

Recebi a ideia do link que Jast postou aqui antes

Answer 5

Corrigi esse problema escondendo filhos do elemento TR.

toggleTr($(".toggletr"));

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

Isso parece ser bom para FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari.

Answer 6

Acabei de encontrar isso eu mesmo - a solução mais fácil que encontrei é verificar:

:Não oculto)

ao invés de

:visível

então aja de acordo. .

Answer 7

Parece que isso foi corrigido no jQuery 1.4.

Answer 8

As mesas são uma peça interessante de HTML, elas não seguem as regras normais como outros elementos.

Basicamente, as tabelas são exibidas como tabelas, existem regras especiais para tabelas, mas isso não foi tratado adequadamente nos navegadores mais antigos por causa da montanha -russa da loucura que era a Guerras do Navegador.

Essencialmente, em navegadores mais antigos, as propriedades de exibição foram mínimas e o fluxo foi deixado em grande parte indocumentado, portanto, em vez de alterar os valores predefinidos para a tag Tabela/TR/TD, é melhor adicionar e remover a aula a seguir e simplesmente alternar a própria classe Sobre o atributo da tabela/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>

A razão para isso é que é uma classe separada sendo usada para alternar a tela, portanto, nada na tabela em si está sendo alterado, nem qualquer uma das propriedades das tabelas precisa ser alterada, exibição e quaisquer propriedades de layout relacionadas são preservadas mesmo que o O navegador não facilita isso nos bastidores.

Answer 9

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

Há um bug jQuery que o IE8 faz com que tudo avalie como verdadeiro. Tente acima

Answer 10

Eu tive o mesmo problema, mas encontrei uma boa solução alternativa para fazer toggle/slideToggle Trabalhe em todos os navegadores.

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

E agora o 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;
});

O resultado é que slideToggle Funciona bem em todos os navegadores, exceto o IE8, no qual parecerá um slide estranho (bagunçado), mas ainda funcionará.

Answer 11

Percebi que a alternância pode não funcionar para o iPhone se você incluir o JQuery Mobile. Se você executar alternar (.ready) antes que o jQuery Mobile seja carregado, ficará bem.

Answer 12

Porque você está fazendo com que eles cliquem em um <a>, você precisa da função de retornar falsa.

Answer 13

Eu notei isso também. Provavelmente você terá que alternar uma classe em cada TD. Ainda não tentei esta solução, então me avise!

Para outros - isso é específico para o IE8, não 6 ou 7.

EDITAR

Claramente, você não tentou isso como evidenciado pelo -1, como acabei de fazer com bons resultados (na minha situação).

CSS

tr.hideme td {display: nenhum}

JS

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