開閉式コンテンツ 全機種対応版
「完全版」として紹介した開閉式コンテンツですが、その後全機種検証で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の切り替えだけなのも、広範囲の機種に対応する必要があるからなのかもしれないですね。