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

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

  •  13-09-2019
  •  | 
  •  

Вопрос

Я использую jQuery's 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();  
    });  
});
Это было полезно?

Решение

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

Другие советы

Обновление до JQUERY 1.4 Исправляет это, хотя я в этом, хотя, единственным «исправлением» на этой странице, которое сработало для меня, был ответ Togh Boy:

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

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

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

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

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

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

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

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

toggleTr($(".toggletr"));

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

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

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

:не спрятанный)

вместо

: Видимо

Затем действуйте соответственно. Анкет

Похоже, это было зафиксировано в JQUERY 1.4.

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

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

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

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

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

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

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

Я заметил, что переключатель может не работать для iPhone, если вы включите JQUERY Mobile. Если вы запускаете Toggle (.Ready) до загрузки jQuery Mobile, то это нормально.

Потому что вы заставляете их щелкнуть <a>, вам нужна функция, чтобы вернуть ложь.

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

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

РЕДАКТИРОВАТЬ

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

CSS

tr.hideme td {display: none}

JS

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top