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

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

.show()/ работать нормально.

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();  
    });  
});
25
html jquery toggle

13 ответов

я испытал эту же ошибку на tr в таблицах. Я провел некоторое исследование с помощью инструмента отладки скриптов IE8.

сначала я попытался использовать toggle:

$(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 немного странный. В любом случае, это исправило мою проблему.

46

обновление до jQuery 1.4 исправляет это, хотя я нахожусь в этом, единственное "исправление" на этой странице, которое сработало для меня, было ответом тестового мальчика:

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

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

6

я обнаружил, что, хотя это не работает в IE8

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

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

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

есть идея по ссылке последний до

4

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

toggleTr($(".toggletr"));

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

Это вроде нормально для ФФ3.5/ФФ3/ИЕ8/ИЕ7/ИЕ6/хром/сафари.

4

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

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

вместо

:видно

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

3

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

2

таблицы-интересный фрагмент html, они не следуют обычным правилам, как другие элементы.

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

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

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

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

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

1

у меня была та же проблема, но я нашел хороший обходной путь, чтобы сделать 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, в котором будет выглядеть странно (испорченный слайд), но он все равно будет работать.

1

Я заметил, что переключатель может не работать для iphone, Если вы включаете jQuery mobile. Если вы запустите toggle (.ready) перед загрузкой jQuery mobile его штраф.

0

потому что у вас есть их нажмите <a>, вам нужна функция для возврата false.

-1

Я тоже это заметил. Скорее всего, вам придется переключать класс на каждом td. Не пробовал это решение, так что дайте мне знать!

для других-это специфично для IE8, а не 6 или 7.

редактировать

очевидно, вы не пробовали это, как свидетельствует -1, Как я только что сделал с прекрасными результатами (в моей ситуации).

в CSS

tr.hideme td { display: none }

JS

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