bootstrapスマホPC時でレスポンシブメニュー折りたたみ

2015年4月15日更新 view: 135 view
http://designup.jp/wp/wp-content/uploads/2014/06/Bootstrap.png

スマホの時は折りたたみ、PCの時はそのまま表示

スポンサードリンク

レスポンシブデザインをしているとスマホの時とPCの時で表示を分けたい場合がある。
その場合の方法。

スマホのみ表示

<!-- スマホのみ表示 -->
<a class="btn btn-default visible-xs hide-box-show" type="button" data-id="box1">絞込ボックス表示</a>

visible-xs を使うことで スマホの場合のみ表示
ということができる。

PCのみ表示

PCのみ表示
<!-- PCのみ表示 -->
<div class="hidden-xs toggle-hide" data-id="box1">

hidden-xs をすることで PCのみ表示になる

応用: PCのみ表示、スマホの場合は折りたたみ

PCの場合は表示、スマホの場合は非表示にしておき、
ボタンを押すことで表示非表示することができる。

同じ data-id のものを表示、非表示させることができる。

<script>

$(function () {
$('.hide-box-show').click(
function(){
$(".toggle-hide[data-id="+ $(this).data('id') +"]").toggleClass("visible-xs-block");
$(".toggle-hide[data-id="+ $(this).data('id') +"]").toggleClass("hidden-xs");
}
);
});

</script>


<!-- スマホのみ表示 -->
<a class="btn btn-default visible-xs hide-box-show" type="button" data-id="box1">絞込ボックス表示</a>

<!-- PCのみ表示 -->
<div class="hidden-xs toggle-hide" data-id="box1">
スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月21日 ( 木 ) にアクセスが多かった記事はこちら!