Javascript

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) все равно не будет отображаться.

Пример

Есть у нас форма в таблице, у которой первые две строки видны, а остальные спрятаны и должны отображаються по нажатию на ссылку.

PLAIN TEXT
CODE:
  1. <table>
  2. <tr>
  3.     <td>Your name: </td>
  4.     <td><input type="text" name='name'></td>
  5. </tr>
  6. <tr>
  7.     <td>Your email: </td>
  8.     <td><input type="text" name='email'></td>
  9. </tr>
  10. <tr>
  11.     <td colspan='2'><a href="javascript:void(0);" onClick="showAdvFields();" id="showAdvFields">+ Show advanced options</a></td>
  12. </tr>
  13. <tr class='hide'>
  14.     <td>Your twitter: </td>
  15.     <td><input type="text" name='twitter'></td>
  16. </tr>
  17. <tr>
  18.     <td></td>
  19.     <td><input type="submit" value='Submit'></td>
  20. </tr>
  21. </table>
  22.  
  23. <scripty type="text/javascript">
  24. //$j - это ссылка на jQuery.
  25. function showAdvFields()
  26. {
  27.     if ($j("tr").hasClass('hide')){
  28.         $j("tr.hide").addClass('showAdv');
  29.         $j("tr.hide").removeClass('hide');
  30.         $j("#showAdvFields").html(" - Hide advanced options");
  31.        
  32.     } else {
  33.         $j("tr.showAdv").addClass('hide');
  34.         $j("tr.showAdv").removeClass('showAdv');
  35.         $j("#showAdvFields").html(" + Show advanced options");
  36.     }
  37. }
  38. </script>

Решение

Во первых перестаньте использовать барузер Internet Explorere и переходите на FireFox и Google Chrome :). А если у вас нет выбора, то решение использовать функцию jQuery show, которая решает проблему совместимости с IE.
Вот так я изменил метод показа и скрытия строки таблицы.

PLAIN TEXT
CODE:
  1. function showAdvFields()
  2. {
  3.     if ($j("tr").hasClass('hide')){
  4.         $j("tr.hide").addClass('showAdv');
  5.         $j("tr.hide").show();
  6.         $j("tr.hide").removeClass('hide');
  7.         $j("#showAdvFields").html(" - Hide advanced options");
  8.        
  9.     } else {
  10.         $j("tr.showAdv").addClass('hide');
  11.         $j("tr.showAdv").hide();
  12.         $j("tr.showAdv").removeClass('showAdv');
  13.         $j("#showAdvFields").html(" + Show advanced options");
  14.     }
  15. }

Вывод

Не используйте доморощенные решения, читайте документацию и используйте стандартные методы. Я добавил вызов $j("tr.hide").show(), что помогло решить проблему показа и вызвов $j("tr.showAdv").hide() что решило проблему скрытия строки.

Можно конечно обойтись и без класса hide, но такое решения было очень практично.