解決したいことは、jsでブレイクポイントで、タブとアコーディオンを切り替えを実装しているのですが、
PCでウィンドウを縮めた時とユーザーエージェントの記述を合体させたいと考えております。
※理由は、ウィンドウの分岐とユーザーエージェントの分岐を2箇所同じ内容を記載する手間を省きたいため。
ユーザーエージェントは、このままでいいのですが、PCでウィンドウを縮めて戻した時に、
一度、リロードをかまさないと、prependTOが効いたままになってしまい、タブ内の中身が空になってしまうため、リロードは現状必須です。
スマホの時は、タブのコンテンツがアコーディオンの見出しの直下に移動させるため、prependToを使っております。
ご教授いただけますでしょうか。
ウィンドウサイズによる分岐
$(window).on("resize", function() { var tm; clearTimeout(tm); tm = setTimeout(function() { if ($(window).width() < 736) { $('#faq-ttl-tab1-1').prependTo('#faq-cont-tab1-1'); $('#faq-ttl-tab1-2').prependTo('#faq-cont-tab1-2'); $('#faq-ttl-tab1-3').prependTo('#faq-cont-tab1-3'); jQuery('body').css('background', '#ccc'); } else if ($(window).width() < 1023) { location.reload(); } else { // width more than 768px for PC } }, 10); });
ユーザーエージェントによる分岐
// start iphone only if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0) { $(function() { $('#faq-ttl-tab1-1').prependTo('#faq-cont-tab1-1'); $('#faq-ttl-tab1-2').prependTo('#faq-cont-tab1-2'); $('#faq-ttl-tab1-3').prependTo('#faq-cont-tab1-3'); }); }; // end iphone only
//spアコーディオン $(function() { function demo01() { $(this).next().slideToggle(300); } $(".simple .toggle").click(demo01); function demo02() { $(this).toggleClass("sp-active").next().slideToggle('500'); } $(".switch .toggle").click(demo02); }); // pcタブ $(function() { //クリックしたときのファンクションをまとめて指定 $('.tab-menu-wrap > li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab-menu-wrap > li').index(this); //コンテンツを一度すべて非表示にし、 $('.tab-content > li').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.tab-content > li').eq(index).css('display','block'); //一度タブについているクラスselectを消し、 $('.tab-menu-wrap > li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); });
回答2件
あなたの回答
tips
プレビュー