開閉式コンテンツ 全機種対応版
「完全版」として紹介した開閉式コンテンツですが、その後全機種検証でMEDIUS等でjQueryのslideUp,slideDown,slideToggleが動かない機種があることが判明し、以下のように書き換えました。
<dl> <dt class="show-hide">●●●について・・・</dt> <dd>●●●とは・・・</dd> </dl>
dt.show-hide +dd { display:none; } dt.show-hide +dd.opened { display:block; }
$(function(){ $('dt.show-hide').each(function(j){ $('dt.show-hide').eq(j).click(function(){ if($('+dd','dt.show-hide').eq(j).css('display') =='none') $('+dd','dt.show-hide').eq(j).addClass('opened'); else $('+dd','dt.show-hide').eq(j).removeClass('opened'); }); }); });
jQueruのslideのアニメーションが無くなったのはさみしいけど、全機種で開閉式コンテンツが動作するようになりました。
全機種対応するにはここまでしないとならないのですね。
Wikipediaなどのスマートフォン版の「表示する」ボタンがjQueryのアニメーション無しでシンプルにcssのdisplayの切り替えだけなのも、広範囲の機種に対応する必要があるからなのかもしれないですね。