本日はjQueryのslideToggleを、table関連の要素に使用した時に起きる不具合に関して記載したいと思います。
具体的に言うと、tableタグの中のtrタグ、th,tdタグ部分をslideToggle()を使用して、アコーディオン的な形で要素を表示・非表示する際に起きる不具合に関してです。
この不具合は、限定的な状況下で起きるモノで、あまり役に立つコトは無いと思いますが、誰かの役になったらイイなと書いていきたいと思います。
1.不具合の実例
上記の「検索サイト」「ネット通販」と言う部分をクリックするとわかると思うのですが、表示させた<tr>部分がtable要素の横幅いっぱいに広がらず、左側に寄ってしまっています。
これは、通常のtr要素に指定されている「display」は「table-row」なのですが、slideToggleを使うと「table-row」ではなく「block」として表示されてしまうために起きた不具合です。
実はこの不具合はjQueryのバージョンが1.3.2以下で起きる不具合で、1.4以上であれば、「table-row」として表示してくれるので心配いりません。
厳密に言うと1.4.3以上なら完全に問題ありません。
1.4〜1.4.2は、一瞬blockを挟んでからのtable-rowなので、挙動が不自然になります。
上記は1.4.2の挙動です。
もし、slideToggleの動作がおかしかった場合はjQueryのバージョンを調べてみましょう。
Web制作にふれ始めたばかりだと、情報の古いサイトに載っていたjQueryのCDNをそのままコピペしていた場合などに、このようなコトが起きることがあると思います。
上記で述べたようにjQueryのバージョンが1.4.3以上であれば問題ないので、バージョンを変更すれば問題は解決するのですが、既存サイトの修正依頼などで下手にバージョンを変えるコトが出来ない案件なども中にはあると思います。
2.バージョンが1.4.2以下のモノを使用する場合
slideToggle()ではなく、toggle()を使用するのが良いと思います。
このようにtoggleであれば、「display」は「table-row」で表示してくれます。
slideToggle()クリックした際に、jQueryで表示される要素のdisplayの値を取得し、blockだった場合にtable-rowに書き換えると言うやり方も浮かびますが、一度blockを挟んでしまうため、スマートな挙動にはなりません。
ヌルっと感はなくなってしまいますが、toggle()を素直に使用するのがスマートです。
もし、toggle()でも挙動がおかしい場合は、JSの部分を下記にしてもtoggle()と同じ形で動きます。
$('.btn').click(function() {
if($(this).next().hasClass("show")){
$(this).next().removeClass('show').hide();
}else{
$(this).next().addClass('show').show();
}
});
slideToggleに限らず、toggle系で挙動がおかしい時、記述が合っているのであれば、使用しているjQueryのバージョンの古さが原因かもしれません。