4月 21, 2010
[jquery]IE8でtrに.toggle()が効かない
jqueryを利用してテーブルをアコーディオンのように列を表示するUIを作成していて、
IE８だけが列を開くことができなかった。
jqueryのバージョンは1.3.2です。
下記のようにjqueryのtoggle関数を利用して実装していました。
※利用しているソースは参考させてもらった下記のサイトから抜粋しています。
http://stackoverflow.com/questions/975153/jquery-toggle-not-working-with-trs-in-ie
//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(); }); });
toggle関数が効かない原因は、
$(classname).is(“:visible”)
が必ずtrueを返すためにshow()が実行されないため。
if($(classname).is(":visible"))//IE8 always evaluates to true.
$(classname).hide();
else
$(classname).show();
なので、下記のようにtoggle関数を利用しない方法で実装する。
var elem = $(classname)[0];
if(elem.style.display == 'none')
$(classname).show();
else
{
$(classname).hide();
}
これでIE8も問題なく動作した。
◯参考サイト
http://stackoverflow.com/questions/975153/jquery-toggle-not-working-with-trs-in-ie