IE7 не показывает скрытый html после удаления CSS класса который его скрывал с помощью jQuery
Posted in Development, Javascript, Tips And Tricks on December 24th, 2009 by Yaroslav Vorozhko – 1 CommentПроблема
У IE7 и IE6 есть такая особенность, что когда вы удалете класс, который скрывал (display:none) содержимое строки таблицы (тег tr) с помощью jQuery метода removeClass(), то сожержимое строки таблицы (тег tr) все равно не будет отображаться.
Пример
Есть у нас форма в таблице, у которой первые две строки видны, а остальные спрятаны и должны отображаються по нажатию на ссылку.
-
<table>
-
<tr>
-
<td>Your name: </td>
-
<td><input type="text" name='name'></td>
-
</tr>
-
<tr>
-
<td>Your email: </td>
-
<td><input type="text" name='email'></td>
-
</tr>
-
<tr>
-
<td colspan='2'><a href="javascript:void(0);" onClick="showAdvFields();" id="showAdvFields">+ Show advanced options</a></td>
-
</tr>
-
<tr class='hide'>
-
<td>Your twitter: </td>
-
<td><input type="text" name='twitter'></td>
-
</tr>
-
<tr>
-
<td></td>
-
<td><input type="submit" value='Submit'></td>
-
</tr>
-
</table>
-
-
<scripty type="text/javascript">
-
//$j - это ссылка на jQuery.
-
function showAdvFields()
-
{
-
if ($j("tr").hasClass('hide')){
-
$j("tr.hide").addClass('showAdv');
-
$j("tr.hide").removeClass('hide');
-
$j("#showAdvFields").html(" - Hide advanced options");
-
-
} else {
-
$j("tr.showAdv").addClass('hide');
-
$j("tr.showAdv").removeClass('showAdv');
-
$j("#showAdvFields").html(" + Show advanced options");
-
}
-
}
-
</script>
Решение
Во первых перестаньте использовать барузер Internet Explorere и переходите на FireFox и Google Chrome :). А если у вас нет выбора, то решение использовать функцию jQuery show, которая решает проблему совместимости с IE.
Вот так я изменил метод показа и скрытия строки таблицы.
-
function showAdvFields()
-
{
-
if ($j("tr").hasClass('hide')){
-
$j("tr.hide").addClass('showAdv');
-
$j("tr.hide").show();
-
$j("tr.hide").removeClass('hide');
-
$j("#showAdvFields").html(" - Hide advanced options");
-
-
} else {
-
$j("tr.showAdv").addClass('hide');
-
$j("tr.showAdv").hide();
-
$j("tr.showAdv").removeClass('showAdv');
-
$j("#showAdvFields").html(" + Show advanced options");
-
}
-
}
Вывод
Не используйте доморощенные решения, читайте документацию и используйте стандартные методы. Я добавил вызов $j("tr.hide").show(), что помогло решить проблему показа и вызвов $j("tr.showAdv").hide() что решило проблему скрытия строки.
Можно конечно обойтись и без класса hide, но такое решения было очень практично.
