質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

レスポンシブでアコーディオン・タブのブレークポイント時のリセット関数について

Asibe
Asibe

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

4335閲覧

投稿2016/12/05 06:29

現在、レスポンシブでWebページを作成しており、自分では解決できそうもないので質問をさせていただきます。皆様のお力をお貸しください・・・よろしくお願いいたします。

前回の質問:https://teratail.com/questions/54584

#やりたいこと

ブレークポイント時に非表示状態になった要素がリセット関数で初期状態に戻っており、選択中の要素がブレークポイントで切り替わっても選択状態であること

理想の状態は、下記:参考サイト様内のキリンビール様のURLをご参照ください。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> //リセット function resetMenu(){ var w = $(window).innerWidth(); var $activeClass = 'is-active'; if(w <= 640){ }else{ } } $(function(){ var $switchPoint = 768, $tab_Item = $('.tab li'), $accordion = $('.acr-title'), $accordionc = $('.acr-title p'), $tabContents = $('.tab-contents'), $activeClass = 'is-active', $activeTab = $(this).find('a').attr('href'); if(window.innerWidth >= $switchPoint){ //最初のtabContents以外は隠す $(".tab-contents").hide(); $(".tab li:first").addClass($activeClass).show(); $(".tab-contents:first").show(); $(".tab li").click(function(){ $(".tab li").removeClass($activeClass); $(this).addClass($activeClass); $(".tab-contents").hide(); $($activeTab).fadeIn(); return false; }); }else{ //スマホ時の処理 $tabContents.show(); $('.close-tab').hide(); $('.acr-body').append('<p id="close" class="mt-10 mb-15 btn-close btn-link"><a href="#" class="close-link">閉じる</a></p>'); $accordion.click(function(){ $accordion.removeClass('open_close'); $accordionc.css("display","none"); $(this).next().slideUp(300); $(this).removeClass('selected'); if($(this).next().css("display")=="none"){ $(this).addClass('open_close'); $('.acr-body').slideUp(300); $(this).next().slideDown(300); $("+.acr-body p",this).fadeIn(1500); $('.selected').removeClass('selected'); $(this).addClass('selected'); } }); if($('.tab-contents').size() > 0){ //コンテンツの数 var tabsNum = $('.acr-title').length; //コンテンツ部分のフラグ var navFlag = new Array(); for( i = 0; i < tabsNum; i++){ navFlag[i] = true; }; //閉じるボタンの処理 $('.tab-contents #close').on('click',function(){ var closeNum = ($(this).parents('.acr-title').index()); $(this).parents('.acr-body').slideUp('300'); $(this).parents('.acr-body').prev('.tab-contents').removeClass('current'); navFlag[closeNum] = true; }); } } }); </script> </head> <body> <!-- タブメニュー(640px以下では表示しない) --> <div class="tabs"> <div class="tab-button-outer"> <ul class="tab only-tab"> <li data-tab="#link1"><a href="#link1">リンク1</a></li> <li data-tab="#link2"><a href="#link2">リンク2</a></li> <li data-tab="#link3"><a href="#link3">リンク3</a></li> </ul> </div> <!-- タブbody--> <div id="link1" class="tab-contents"> <div class="acr-title check-btn only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない --> <div class="acr-body"> <p>アコーディオ</p> <p>アコーディオン</p> <p>アコーディオン</p> </div> </div> <!-- タブbody--> <div id="link2" class="tab-contents"> <div class="acr-title check-btn only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない --> <div class="acr-body close-tab"> <p>アコーディ</p> <p>アコーディオン</p> <p>アコーディオン</p> </div> </div> <!-- タブbody--> <div id="link3" class="tab-contents"> <div class="acr-title check-btn only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない --> <div class="acr-body close-tab"> <p>アコ</p> <p>ア</p> <p>アコーディオン</p> </div> </div> </div> </body> </html>
@charset "utf-8"; *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } li,ol,ul{ list-style: none; } .tabs{ margin: 0 auto; padding: 0 20px; max-width: 640px; width: 100%; } .tab{ display: table; table-layout: fixed; width: 100%; } .tab li{ display: table-cell; } .tab li a{ display: block; padding: .5em; background-color: #eee; border: 1px solid #ddd; color: #333; text-decoration: none; text-align: center; } .tab li:not(:first-child) a { border-left: none; } .tab li a:hover, .tab .is-active a{ border-bottom-color: transparent; background-color: #fff; } .tab-button-outer{ display: none; } @media screen and (min-width: 768px){ .tab-button-outer{ display: block; position: relative; z-index: 2; } } .only-sp{ padding: 10px; position: relative; cursor: pointer; text-align: center; color: #fff; background-color: #333; } .only-sp:hover{ background-color: #eee; } .only-sp::after{ content:"+"; display: block; position: absolute; top: 2.5px; right: 8px; bottom: 0; width: 20px; height: 12px; font-size: 20px; font-size: 2rem; background-size: 100% auto; -webkit-transition: 0.3s linear; -moz-transition:0.3s linear; -ms-transition:0.3s linear; transition: 0.3s linear; } @media screen and (min-width: 768px){ .only-sp{ display: none; } } .open_close::after{ content:"-"; } .tab-contents{ padding: .5em 1em 1em; } @media screen and (min-width: 768px){ .tab-contents{ position: relative; top: -1px; border: 1px solid #ddd; } } @media screen and (min-width: 768px){ #close{ display: none; } } .acr-body{ display: block; padding: 10px; height: 110px; } @media screen and (min-width: 768px){ .acr-body{ height: 200px; } } .acr-body p{ display: block; margin: 10px 0; border: 1px dashed #d6dddf; } @media screen and (min-width: 768px){ .acr-body p{ padding: 10px; border: none; } } .selected{ background-color: #ffc44d; }

#試したこと
上記のURLでご質問させていただいた案件につきまして、それぞれスマホ時にアコーディオン・タブレットからPC時にはタブパネルとそれぞれ単独での実行はできたのですが、
タブレットPCサイズでタブパネル内のリンクをクリックし内容が表示されるまではいいのですが、スマホサイズに幅を縮めると選択したタブパネル以外が非表示状態のアコーディオンパネルとなってしまいます。※スマホ状態のアコーディオンでもPCサイズのタブパネルになったら同じような状態になってしまいます。

前回の質問の回答中に"ブレークポイント"時に"リセット系の関数"が必要とご忠告され、リセット関数内に要素をクリック前の表示状態を入れてみましたが変化はありませんでした・・・

#参考サイト様

キリンビール様 http://www.kirin.co.jp/campaign/#in_session

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。