jQueryレスポンシブが上手くいかない

横幅が769px以上になったら開閉操作をしないようにしたいのですが、思うようにいきません。
jsのところが原因なのはわかりますが、どのコードが原因でそのようになっているのかがわかりません。

　　↓コードは以下の通りです。

html
1        <!-- flow -->
2        <section class="flow">
3            <div class="flow-inner">
4                <h2 class="flow-ttl"><i class="fas fa-laptop"></i>受講の流れ</h2>
5                <img class="flow-img" src="assets/img/flow.jpg" alt="">
6                <div class="flow-box">
7                    <ul class="flow-list">
8                        <li class="flow-item">
9                            <div class="flow-itemTop">
10                                <img src="assets/img/skypeconsulting.png" alt="">
11                                <h3 class="flow-itemTtl">Skypeで<br>事前コンサル</h3>
12                            </div>
13                            <div class="flow-itemBottom">
14                                <p class="flow-itemBold">現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</p>
15                                <p class="flow-itemBold">簡単なテストあり</p>
16                                <p class="flow-itemTxt">
17                                    iSaraでは受講料を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。
18                                    （テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。）
19                                </p>
20                            </div>
21                        </li>
22                        <img class="flow-listImg" src="assets/img/flowline1.png" alt="">
23                        <li class="flow-item">
24                            <div class="flow-itemTop">
25                                <img src="assets/img/preworks.png" alt="">
26                                <h3 class="flow-itemTtl">事前課題の提出</h3>
27                            </div>
28                            <div class="flow-itemBottom">
29                                <p class="flow-itemBold">出発前の１ヶ月前に事前課題を送ります。</p>
30                                <p class="flow-itemTxt">０から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP
31                                    / Mysqlの事前講座</p>
32                                <p class="flow-itemBold">課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。
33                                    回数無制限のチャットサポート付きですので、最初は努力してください。<br>
34                                    また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。</p>
35                            </div>
36                        </li>
37                        <img class="flow-listImg" src="assets/img/flowline2.png" alt="">
38                        <li class="flow-item">
39                            <div class="flow-itemTop">
40                                <img src="assets/img/flight.png" alt="">
41                                <h3 class="flow-itemTtl">現地に渡航</h3>
42                            </div>
43                            <div class="flow-itemBottom">
44                                <p class="flow-itemBold">到着日には空港でお出迎えし、初日のオリエンテーションを行います。
45                                    滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。</p>
46                                <p class="flow-itemBold">iSaraは『ノマド』フリーランス養成講座です。
47                                    楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。
48                                </p>
49                            </div>
50                        </li>
51                        <img class="flow-listImg" src="assets/img/flowline1.png" alt="">
52                        <li class="flow-item">
53                            <div class="flow-itemTop">
54                                <img src="assets/img/personwithlight.png" alt="">
55                                <h3 class="flow-itemTtl">実案件を<br>通して学ぶ</h3>
56                            </div>
57                            <div class="flow-itemBottom">
58                                <p class="flow-itemBold">現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p>
59                                <p class="flow-itemBold">案件獲得のためのメールの書き方や見積りの仕方など、
60                                    他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p>
61                                <p class="flow-itemTxt">＊現役フリーランスがサポートします。</p>
62                            </div>
63                        </li>
64                        <img class="flow-listImg" src="assets/img/flowline2.png" alt="">
65                        <li class="flow-item">
66                            <div class="flow-itemTop">
67                                <img src="assets/img/jobsupport.png" alt="">
68                                <h3 class="flow-itemTtl">帰国後の仕事獲得<br>サポート付き</h3>
69                            </div>
70                            <div class="flow-itemBottom">
71                                <p class="flow-itemBold">経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</p>
72                                <p class="flow-itemBold">iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。
73                                    もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</p>
74                            </div>
75                        </li>
76                    </ul>
77                </div>
78            </div>
79        </section>
80  //レスポンシブ
81  // flow
82  .flow-inner {
83    padding: 0 40px 20px;
84    .flow-ttl {
85      font-size: 2.4rem;
86      margin: 1.5em 0;
87      i {
88        font-size: 1.8rem;
89      }
90    }
91    .flow-img {
92      display: block;
93      width: 100%;
94      margin: 0 auto;
95      max-width: 1000px;
96    }
97  }
98  .flow-box {
99    margin: 40px 20px;
100    .flow-listImg {
101      display: block;
102      margin: 0 auto;
103      max-width: 65%;
104    }
105  }
106  .flow-item {
107    display: flex;
108    padding-top: 30px;
109    padding-bottom: 20px;
110    cursor: initial;
111    .flow-itemTop {
112      display: block;
113      min-width: 200px;
114      text-align: center;
115      margin-left: 45px;
116      &::after {
117        display: none;
118      }
119      img {
120        width: auto;
121        margin-right: 0;
122      }
123      .flow-itemTtl {
124        font-size: 1.8rem;
125        margin-top: 10px;
126        br {
127          display: block;
128        }
129      }
130      &.add-active {
131        &::after {
132          display: none;
133        }
134      }
135    }
136    .flow-itemBottom {
137      padding: 0 13px 13px;
138      display: block;
139      .flow-itemBold {
140        font-size: 1.4rem;
141      }
142    }
143  }

scss
1// flow
2.flow-inner {
3  padding: 0 16px 60px;
4  .flow-ttl {
5    text-align: center;
6    font-size: 1.8rem;
7    line-height: 2.2;
8    font-weight: 600;
9    letter-spacing: 0.1em;
10    margin: 2em 0;
11    i {
12      font-size: 1.4rem;
13    }
14  }
15  .flow-img {
16    display: none;
17  }
18}
19.flow-item {
20  background-color: #fdf5e0;
21  border-radius: 3px;
22  cursor: pointer;
23  &:not(:last-of-type) {
24    margin-bottom: 3px;
25  }
26  .flow-itemTop {
27    display: flex;
28    align-items: center;
29    padding: 10px 13px;
30    position: relative;
31    &::after {
32      content: "";
33      width: 7px;
34      height: 7px;
35      border-bottom: 4px solid #000;
36      border-right: 4px solid #000;
37      transform: rotate(45deg);
38      position: absolute;
39      right: 20px;
40    }
41    img {
42      width: 35px;
43      margin-right: 13px;
44    }
45    .flow-itemTtl {
46      font-weight: 600;
47      font-size: 1.5rem;
48      letter-spacing: 0.1em;
49      br {
50        display: none;
51      }
52    }
53    &.add-active {
54      &::after {
55        border-bottom: none;
56        border-right: none;
57        border-top: 4px solid #000;
58        border-right: 4px solid #000;
59        transform: translateY(-5px) rotate(-45deg);
60      }
61    }
62  }
63  .flow-itemBottom {
64    padding: 0 13px 20px;
65    display: none;
66    &:nth-child(1) {
67      padding: 13px 20px;
68    }
69    .flow-itemBold {
70      font-weight: 600;
71      font-size: 1.2rem;
72      line-height: 1.6;
73      letter-spacing: 0.1em;
74      margin: 1em 0;
75    }
76    .flow-itemTxt {
77      font-size: 1.2rem;
78      letter-spacing: 0.05em;
79      line-height: 1.6;
80      font-weight: 300;
81    }
82  }
83}

js
1  // flow
2  var mediaQuery = matchMedia("(max-width: 768px)");
3  handle(mediaQuery);
4  mediaQuery.addListener(handle);
5  function handle(mq) {
6    if (mq.matches) {
7      $(".flow-item").on("click", function () {
8        $(this).find(".flow-itemBottom").stop().slideToggle(250);
9        $(this).find(".flow-itemTop").toggleClass("add-active");
10        $(".flow-item")
11          .not($(this))
12          .find(".flow-itemBottom")
13          .stop()
14          .slideUp(250);
15        $(".flow-item")
16          .not($(this))
17          .find(".flow-itemTop")
18          .removeClass("add-active");
19      });
20      $(".flow-item").hover(
21        function () {
22          $(this).find(".flow-itemTtl").css("text-decoration", "underline");
23        },
24        function () {
25          $(this).find(".flow-itemTtl").css("text-decoration", "none");
26        }
27      );
28    }
29  }

m.ts10806

2020/07/07 06:48

質問内容がありません。前提や背景、要件、おきている問題、調べたこと試したこと、環境具体的に記載してください

m.ts10806

2020/07/07 06:49

それに「どうなったら解決なのか」が明示されてないと他者には答えようがありません。「しらみ潰しに全て挙げてくれ」という丸投げのデバッグ依頼でしょうか

Lhankor_Mhy

2020/07/07 06:52

3-3. 質問詳細の最初に実現したいことを書きましょう https://teratail.com/help/question-tips#questionTips3-3 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3

yuta_bsn

2020/07/07 09:13

スリープ状態から立ち上げて質問ボタンを押したので、更新されていませんでした。二人目の方はご丁寧にありがとうございました。

yuta_bsn

2020/07/07 09:16

一人目の方は煽っているのでしょうか？

Lhankor_Mhy

2020/07/07 09:27

>yuta_bsn さん m.ts10806 さんの言い方はきついですが、言いたいことは私も同じです。何をどうしたいのか、質問からは全く読み取れませんでしたので、「こういう目的で、こうなると思って、こういうコードを書いたが、こういう結果になった」などのように、具体的に質問をお願いいたします。

m.ts10806

2020/07/07 12:13

淡々と指摘してるだけで煽ってると言われても困りますが、あくまで「質問の追記修正依頼」をしています。プログラミングに関する話に終始するだけなので、特に感情的なところは無用かと思います。(押し付けるわけではないですが、気にしたところで解決に向かいません)

Lhankor_Mhy

2020/07/08 03:59

「思うようにいきません」とは、具体的には何が起きていますか？　エラーメッセージなどをご提示ください。（エラーメッセージをどうやって見るのかわからないのであれば、その旨お知らせください。）

yuta_bsn

2020/07/08 04:05

ウィンドウを769px以上の状態でリロードしたら意図した通りに開閉操作ができなくなるのでいいのですが、768px以下からウィンドウの横幅を769以上に伸ばすと開閉操作ができてしまいます。どんな状況でも769px以上のときは開閉操作はしないようにしたいのです。

Lhankor_Mhy

2020/07/08 04:14

なるほど、問題が把握できました。

yuta_bsn

2020/07/08 04:15

ありがとうございます。質問力鍛えていきます。

行動規範の内容に同意します

回答1件

ベストアンサー

これでいかがでしょうか。
現在のコードですと、ブレークポイントをまたぐたびにクリックイベントなどのハンドラが増えてしまうので、その部分を変更しました。

js
1    var mq = matchMedia("(max-width: 768px)");
2    $(".flow-item").on("click", function () {
3        if (mq.matches) {
4            $(this).find(".flow-itemBottom").stop().slideToggle(250);
5            $(this).find(".flow-itemTop").toggleClass("add-active");
6            $(".flow-item")
7                .not($(this))
8                .find(".flow-itemBottom")
9                .stop()
10                .slideUp(250);
11            $(".flow-item")
12                .not($(this))
13                .find(".flow-itemTop")
14                .removeClass("add-active");
15        }
16    });
17
18    $(".flow-item").hover(
19    function () {
20        if (mq.matches) {
21            $(this).find(".flow-itemTtl").css("text-decoration", "underline");
22        }
23    },
24    function () {
25        if (mq.matches) {
26            $(this).find(".flow-itemTtl").css("text-decoration", "none");
27        }
28    }
29    );

投稿2020/07/08 04:24

Lhankor_Mhy

総合スコア36960

yuta_bsn

2020/07/08 07:33

そのままコピペして入りつけたのですが、今度は逆に開閉が768px以下のときも以上のときもできなくなりました。エラーは45個でてきて ncaught ReferenceError: mq is not defined at HTMLLIElement.<anonymous> (isara.js:21) at HTMLLIElement.handle (jquery.min.js:2) at HTMLLIElement.dispatch (jquery.min.js:2) at HTMLLIElement.v.handle (jquery.min.js:2) isara.js:26 Uncaught ReferenceError: mq is not defined at HTMLLIElement.<anonymous> (isara.js:26) at HTMLLIElement.handle (jquery.min.js:2) at HTMLLIElement.dispatch (jquery.min.js:2) at HTMLLIElement.v.handle (jquery.min.js:2) こんな感じででてきました。