スライドを切り替えた先のアコーディオンを閉じた状態に

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 719

a2s

score 24

前提・実現したいこと

・Swiperを使用しスライドを導入
・スライドの中にアコーディオンを入れ、タイトルを押すと中身が表示される
・スライドを切り替えた先のアコーディオンは閉じたまま

発生している問題

・アコーディオンを開いた状態のままスライドさせると、別のタイトル部分のアコーディオンも開いた状態になっている
例:タイトルAを開く→開いたままスライド→タイトルCも開いた状態になっている

実現したいことの上2つはできているのですが、3つ目がスライドの際の挙動をJSで制御すればいける?のかなと思うのですが、詰まってしまいました。
スライドの数はこの先いくつも増える予定のため、タイトル名ごとに別個のアコーディオン用クラス/記述は作りたくないのですが、それ以外に閉じた状態にさせる方法はあるのでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

<link rel="stylesheet" href="css/sanitize.min.css">
<link rel="stylesheet" href="css/swiper.min.css">

<script src="js/jquery-2.1.4.min.js"></script>
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.min.js"></script>
<script src="ja/js/html5shiv.min.js"></script>
<![endif]-->
</head><body id="wrap">

<div class="wrapper">


<div class="hoge">

    <div class="swiper-container">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <div class="slide_hoge">
                    <div class="btn">
                        <ul class="menu">
                            <li>
                                <div class="acorditionA" href="#aaaDetail">タイトルA</a></div>
                            </li>
                            <li>
                                <div class="acorditionB" href="#bbbDetail">
                                    タイトルB
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="acorditionA_in" id="aaa_detail">
                        <p>タイトルAの中身</p>
                        <p><a href="#wrap">▲上へ戻る</a></p>
                    </div>

                    <div class="acorditionB_in" id="bbb_detail">
                        <p>タイトルBの中身</p>
                        <a href="#wrap">▲上へ戻る</a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="slide_hoge">
                    <div class="btn">
                        <ul class="menu">
                            <li>
                                <div class="acorditionA" href="#aaaDetail">タイトルC</a></div>
                            </li>
                            <li>
                                <div class="acorditionB" href="#bbbDetail">
                                    タイトルD
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="acorditionA_in" id="aaa_detail">
                        <p>タイトルCの中身</p>
                        <p><a href="#wrap">▲上へ戻る</a></p>
                    </div>

                    <div class="acorditionB_in" id="bbb_detail">
                        <p>タイトルDの中身</p>
                        <a href="#wrap">▲上へ戻る</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
</div><!--// wrapper //-->

<script src="js/swiper.min.js"></script>

</body>
</html>
$(function(){
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true,
    });
    $('.acorditionA').click(function(){
        $('.acorditionA_in').slideToggle();
    });
    $('.acorditionB').click(function(){
        $('.acorditionB_in').slideToggle();
    });
});
.hoge{
    position: relative;
    min-height: 100%;
    max-width: 1024px;
    padding: 2rem 4rem 0;
    margin: 0 auto;
}
.slide_hoge{
    width: 100%;
    position: relative;
}
.acorditionB, .acorditionA{
    cursor: pointer;
}
.acorditionB_in, .acorditionA_in{
    width: 100%;
    height: 800px;
    color: #fff;
    display: none;
}
.acorditionA_in{
    background-color: #666;
}
.acorditionB_in{
    background-color: #999;
}
.btn{ width: 100%;text-align: center; }
.btn ul{ letter-spacing: -.4em;margin: .5rem 0; }
.btn li{
    width: 50%;
    display: inline-block;
    letter-spacing: normal;
    padding: .5rem;
    border: 1px solid #ccc;
    background-color: #eee;
}
.btn li a{ display: block;text-decoration: none; }
.btn li a:hover{ opacity: .5; }

.swiper-pagination{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}
.swiper-slide{ background: none; }

【追記】
・スライド内のアコーディオンが開いた状態で別のスライドに移動すると、ページの高さがスライドが開いた状態のものになっている
例:「タイトルA」のスライドを開く→スライド→スライド内のアコーディオンが開いていなくても、「タイトルA」が開いているのでページがその高さになっている
これを、スライドごとの高さに変えたい場合はどうすれば良いのでしょうか…?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

$('.acorditionA').click(function(){
    $('.acorditionA_in').slideToggle();
});
$('.acorditionB').click(function(){
    $('.acorditionB_in').slideToggle();
});

問題はこの部分ですね。この書き方だと、同じ.acorditionA_inである全てのタグを開閉することになります。
同一スライド内の.acorditionA_inを開閉したいのでしたら、限定して探していく、このようなコードにすればいいことになります。

$('.acorditionA').click(function(){
    $(this).parents(".swiper-slide").find('.acorditionA_in').slideToggle();
});
$('.acorditionB').click(function(){
    $(this).parents(".swiper-slide").find('.acorditionB_in').slideToggle();
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/14 14:17

    ありがとうございます!こちらの方法でアコーディオン部分できました!
    質問の方に追記をしたのですが、スライドごとに(ページの)高さを設定させる方法がもしわかりましたらお教えいただいても良いでしょうか…?

    キャンセル

  • 2017/07/14 14:59

    Swiperはスライドの直角方向の長さは揃っている前提のライブラリのはずですので、その条件を満たすためには、結構な努力が必要です。
    アイデアとしては、4つあります。
    ・高さ最大を前提に、見た目を調整する
    ・アコーディオンの展開方向を横方向にする(横方向可変はSwiperの設定でなんとかなるはずです)
    ・アコーディオンの展開を別途保存しておいて、onSlideChangeStartのタイミングでいったん全部アコーディオンを閉じ、onSlideChangeEndのタイミングでactiveIndexのスライドだけを開閉処理する(非表示スライドは全て閉じているので、高さはactiveIndexのスライドに依存した最小限になるはず)
    ・各スライドを、縦方向のswiperオブジェクトにする(各スライドごとに、direction:'vertical'設定されたnew Swiperをする)
    4番目が理想的な動作だと思いますので、できそうであればやってみてください。

    キャンセル

  • 2017/07/20 10:10

    ありがとうございました!

    キャンセル

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

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

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