[jquery]IE8でtrに.toggle()が効かない

max — Wed, 21 Apr 2010 12:37:20 +0000

jqueryを利用してテーブルをアコーディオンのように列を表示するUIを作成していて、
IE８だけが列を開くことができなかった。
jqueryのバージョンは1.3.2です。

下記のようにjqueryのtoggle関数を利用して実装していました。
※利用しているソースは参考させてもらった下記のサイトから抜粋しています。
http://stackoverflow.com/questions/975153/jquery-toggle-not-working-with-trs-in-ie

//html
Click

  
  
  
  
  row
row
row
row
row



//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

[jquery]JQUERY ALERT DIALOGS

max — Thu, 27 Aug 2009 04:22:16 +0000

「JQUERY ALERT DIALOGS」
こちらを利用するとjsのダイアログ（alert,confirm,prompt）のviewを自由に変えることができます。

今回利用したのは、viewの変更目的ではなくｊＡlert関数を利用した際に、

1．画面上のボタンなどのイベントを無効としてくれる
2．alertのボタンクリック時のイベントハンドリングが容易
jAlert(“メッセージ”, “タイトル”, function(){/*クリック時のイベント*/});

という点で利用しました。

※IE6でダイアログの幅が横一杯に広がってしまうのは、問題点としてあるとのことです。

○利用方法とサンプルをアップしているブログ記事がありました。
http://javascript.webcreativepark.net/library/jquery_alert_dialogs

maxfactory | モバイル関連の技術メモ » jquery

[jquery]IE8でtrに.toggle()が効かない

[jquery]JQUERY ALERT DIALOGS