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

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

ただいまの
回答率

90.04%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,799

Asibe

score 10

現在、レスポンシブで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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

下記のサイト様に自分の理想としていたソースがあり、無事に解決することができました。

codepen様: http://codepen.io/kazmeyer/pen/lzqhf

上記のサイト様のJqueryでの動きを元に質問させていただいた必要な箇所のソースを組み込みましたら、思い描いていたスマホ時・タブレット時の動きができました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる