jQuery .toggle () не работает с TR в IE

Question

Я использую jQuery toggle (), чтобы показать / скрыть строки таблицы. Он отлично работает в FireFox, но не работает в IE 8.

.show() / .hide() работает нормально, хотя.

slideToggle () также не работает в IE - он показывает на долю секунды, а затем снова исчезает. Прекрасно работает в FireFox.

Мой HTML выглядит примерно так

<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

Я столкнулся с такой же ошибкой в ​​таблицах tr. Я провел некоторое исследование, используя инструмент отладки скриптов IE8.

Сначала я попытался использовать переключатель:

$(classname).toggle();

Это работает в FF, но не в IE8.

Я тогда попробовал это:

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

Когда я отлаживал этот код, jquery всегда думал, что он виден. Так что это закроет его, но потом никогда не откроет.

Затем я изменил это на:

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

Это сработало нормально. В jQuery есть ошибка , или, может быть, мой HTML-файл немного странный. В любом случае, это решило мою проблему.

Answer 2

Обновление до jQuery 1.4 исправляет это, хотя я на этом, но единственное «исправление» на этой странице, которое мне помогло, было ответом Dough boy:

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

Answer 3

Удалить период из вашего <tr class=".readOnlyRow"><td>row</td></tr>. Синтаксис для выбора класса jQuery состоит в том, чтобы предварять его точкой, но он не нужен в вашем HTML-коде.

Answer 4

Я исправил эту проблему, скрыв дочерние элементы элемента TR.

toggleTr($(".toggletr"));

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

Кажется, это нормально для FF3.5 / FF3 / IE8 / IE7 / IE6 / Chrome / Safari.

Answer 5

Я обнаружил, что пока это не работает в IE8

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

но это работает:

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

Получил идею по ссылке, размещенной здесь раньше

Answer 6

Только что столкнулся с этим сам - самое простое решение, которое я нашел, это проверить:

: нет (: скрытый)

вместо

: видимый

тогда действуйте соответственно. .

Answer 7

Таблицы представляют собой интересную часть HTML, они не следуют обычным правилам, как другие элементы.

в основном таблицы отображаются в виде таблиц, есть специальные правила для таблиц, но в старых браузерах это не выполнялось должным образом из-за безумия американских горок, которое было в войнах браузеров.

По существу, в более старых браузерах свойства отображения таблиц были минимальными, и поток оставался в основном недокументированным, поэтому вместо изменения предопределенных значений для тега table / tr / td лучше вместо этого добавить и удалить следующий класс и просто переключить сам класс вкл / выкл по атрибуту таблицы / 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>

Причина этого в том, что это отдельный класс, используемый для переключения отображения, поэтому ничего в самой таблице не изменяется, и не нужно изменять какие-либо свойства таблиц, сохраняются отображение и любые связанные свойства макета. даже если браузер не делает это легко за кадром.

Answer 8

Похоже, это было исправлено в JQuery 1.4.

Answer 9

У меня была такая же проблема, но я нашел хороший обходной путь, чтобы toggle / slideToggle работал во всех браузерах.

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

и теперь 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;
});

В результате slideToggle отлично работает во всех браузерах, кроме IE8, в котором будет выглядеть странно (испорченный слайд), но все равно будет работать.

Answer 10

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

Существует ошибка jQuery, из-за которой в IE8 все оценивается как истинное. Попробуйте выше