開閉式コンテンツ 全機種対応版


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