tableにjQueryのtoggleを使うと幅が100%に広がらない件

jQueryのtoggle(“slow”)やslideToggle(“normal”)など、アニメーションしながら要素を表示させる機能は非常に重宝しますが、これをTABLEタグに対して適用すると、ちょっとした不具合が起こります。 今回はこれをなんとか解決してみます。

テーブルの幅が100%になってくれない!?

IE以外のブラウザで起こる問題なのですが、テーブルの幅を100%にしていても、toggleやslideToggleでアニメーション表示させると幅が100%になってくれません。

このバグはjQuery 1.3.2での再現性を確認していますが、1.5.2以降ではすでに解決されています。 jQueryをバージョンアップできる環境にある場合は、バージョンアップしてしまったほうが近道です。

表示がおかしくなる例(Chrome, Safari, Firefoxにて確認)

ヘッダ コンテンツ
ヘッダ コンテンツ
ヘッダ コンテンツ
ヘッダ コンテンツ

アニメーション表示後に「display:block」に?

この不具合が起こってしまう原因ですが、jQueryのtoggleやslideToggleなどを使って表示すると、これまで「display:table」だったものが「display:block」に変更されてしまうためです。

コールバック関数で再び「display:table」にしよう

ということで、解決方法は再び「display:table」に戻してあげることです。 これを実現させるためには、toggleなどでアニメーション表示が完了した後に実行されるコールバック関数を指定し、その中で「display:table」に変更してあげることです。

$("#sample2").toggle("normal",function(){
    if ($(this).css("display")=="block") {
        $(this).css("display","table");
    }
});

で、改良したものがこちら。 最後に若干なめらかにならない部分はありますが、ちゃんと100%表示が効いているのが確認できます。

ヘッダ コンテンツ
ヘッダ コンテンツ
ヘッダ コンテンツ
ヘッダ コンテンツ

ポイント

コールバック関数の中で無条件に「display:table」してしまうと、非表示の場合にも効いてしまうため、事前に非表示になっているかどうかをif文で確認します。 ブラウザ互換を考えるのであれば、「if ($(this).css(“display”)==”block”) 」で確認するのが良いでしょう。

このページをシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2011-07-23