ハンバーガーメニューをクリックイベントで交差させたい。

BBBが選ばれる理由

\n オンライン対応\n ２４時間いつでも受講できる！\n

\n 講師はネイティブ\n お気に入りの行使が自由に選べる！\n

\n\n

受講生の声

○○さん
<大学生

テキストテキストテキストテキストテキストテキストテキストテキストテキスト\n テキストテキストテキストテキストテキストテキストテキストテキストテキスト

○○さん
会社員

スクールの概要

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

前提

ここに質問の内容を詳しく書いてください。
（javascriptを使って、ハンバーガーメニューをクリックイベントで交差させたいのですがうまくできません。

発生している問題・エラーメッセージ

自ジャバスクリプトがうまく聞いてないように思います。

該当のソースコード

HTML
1コード
2```<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="utf-8"/>
6	<meta name="viewport" content="width=device-width,initial-scale=1">
7    <title>課題テンプレ</title>
8    <link rel="stylesheet" href="css/style.css">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
10    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
11    <script src="js/script.js"></script>
12 
13</head>
14
15<body>
16    <header id="header">
17        <div class="logo">
18            <h1 class="title">BBB</h1>    
19            <span>英会話スクール</span>
20        </div>
21        <div class="hamburger">
22            <span></span>
23            <span></span>
24            <span></span>
25          </div>
26    </header>
27    <main>
28        <div id="mainvisual">
29            <img src="../web3/img/mainvisual1.jpg" alt="main1">
30       
31        </div>
32        <div class="text">
33            <P class="title">話して学ぼう<br> BBB英会話スクール
34            </P>
35            <a class="btn" href="#">無料体験はこちらから </a>
36        </div>
37        <section id="reason">
38            <h2 class="section-title">BBBが選ばれる理由</h2>
39            <div class="bg">
40                <div class= "slide inview-slide-left slide-left">
41                    <img src="">
42                    <p>
43                        <span class="reason_title">オンライン対応</span>
44                        <span class="reason_text">２４時間いつでも受講できる！</span>
45                    </p>
46                </div>
47                <div class="slide inview-slide-right slide-right">
48                    <img src="">
49                    <p>
50                        <span class="reason_title">講師はネイティブ</span>
51                        <span class="reason_text">お気に入りの行使が自由に選べる！</span>
52                    </p>
53                </div>
54
55             </div>
56        </section>
57        <section id="voice">
58                <h2 class="section-title">受講生の声</h2>
59                <dl class="student">
60                    <div> <dt><img src="../web3/img/profile_icon.png"><span>○○さん<br></span><大学生</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
61                            テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> 
62                    </div> 
63                    <div> <dt><img src="../web3/img/profile_icon.png"><span>○○さん<br></span>会社員</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
64                        テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> 
65                    </div> 
66                    <div> <dt><img src="../web3/img/profile_icon.png">○○さん<br></span>会社員</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
67                        テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> 
68                    </div> 
69                </dl>
70        </section>
71        <section id="summary">
72            <h2 class="section-title">スクールの概要</h2>
73            <dl class="summary-list">
74                <div> <dt class="menu-title"><span class="ja">レッスン内容</span><br><span class="en">LESSON</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> 
75                </div> 
76                <div> <dt class="menu-title"><span class="ja">料金プラン</span><span><br><span class="en">PRICE</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> 
77                </div> 
78                <div> <dt class="menu-title"><span class="ja">講師の紹介</span></span><br><span class="en">TEACHER</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> 
79                </div> 
80                <div> <dt class="menu-title"><span class="ja">BBBのQ＆A</span><br><span class="en">Q&A</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> 
81                </div> 
82            </dl>
83        </section>
84        <div id="entry">
85            <p class="title">まずは無料で、BBBの英会話を試してみませんか？</p>   
86            <p class="catchphrase">今なら初月のレッスンを特別価格で受講できる割引クーポンをプレゼント！</p>
87            <a class="btn" href="#">無料体験に申し込む</a>
88        </div>
89    </main>
90    <footer>
91        <ul class="footmenu">
92            <li><p class="title">コース一覧</p>
93                <ul class="menu">
94                    <li><a href="#">スタンダードプラン</a></li>
95                    <li><a href="#">プレミアムプラン</a></li>
96                    <li><a href="#">短期集中プラン</a></li>
97                    <li><a href="#">日常英会話コース</a></li>
98                    <li><a href="#">ビジネス英会話コース</a></li>
99                </ul>
100            </li>
101            <li><p class="title">講師紹介</p>
102                <ul class="menu">
103                    <li><a href="#">講師について</a></li>
104                    <li><a href="#">講師一覧</a></li>
105                    <li><a href="#">講師を探す</a></li>
106                   
107                </ul>
108            </li>
109            <li><p class="title">会社概要</p>
110                <ul class="menu">
111                    <li><a href="#">会社概要</a></li>
112                    <li><a href="#">採用情報</a></li>
113                </ul>
114            </li>
115            <li><p class="title">BBBについて</p>
116                <ul class="menu">
117                    <li><a href="#">よくあるご質問</a></li>
118                    <li><a href="#">ご利用規約</a></li>
119                    <li><a href="#">プライバシーポリシー</a></li>
120                    <li><a href="#">お問い合わせ</a></li>
121                   
122                </ul>
123            </li>
124        </ul>
125        <p class="copyright">© BBB English School</p>
126    </footer>
127
128
129
130
131    
132
133</body>
134</html>
135
136
137```CSS
138CSSの該当部分はとりあえず動くかどうかの動作確認のために背景色を変えるだけになってます。
139コード
140*{
141    margin:0;
142    padding:0;
143}
144.logo{
145    color: red;
146    vertical-align: bottom;
147    line-height: 25px;
148}
149.title{
150  text-align: left;
151  font-size:45px;
152  font-weight: bold;
153  text-shadow: 0 4px 6px #fff;
154}
155 #header{
156  padding: 40px 0 0 50px;
157 }
158.logo span{
159    vertical-align: bottom;
160    font-size: 15px;
161}
162.hamburger{
163  background-color: #ff2a2a;
164    position: fixed;
165    width: 100px;
166    height: 100px;
167    top: 0;
168    right: 0;
169    z-index: 30;
170    cursor: pointer;
171    transition: 0.3s;
172}
173.hamburger span{
174    width: 35px;
175    height: 2px;
176    position: absolute;
177    left: 33px;
178    background: white;
179}
180.hamburger.active{
181  background: blue;
182}
183.hamburger span:nth-child(1){
184  top: 24px;
185}
186.hamburger span:nth-child(1).active{
187  transform: rotate(45deg);
188  background: blue;
189}
190
191.hamburger span:nth-child(2){
192  top: 40px;
193}
194.hamburger span:nth-child(3){
195  top: 55px;
196}
197.hamburger span:nth-child(3).active{
198  transform: rotate(45deg);
199  background: blue;
200}
201#mainvisual{
202    position: relative;
203    margin-bottom: 120px;
204}
205#mainvisual img{
206    width: 100%;
207}
208.text{
209display: block;
210    z-index: 10;
211    position: absolute;
212    top: 280px;
213    left: 25%;
214  }
215    .btn{
216      background-color: #ff2a2a;
217      border-bottom: 6px solid #9a0413;
218      border-radius: 10px;
219      color: #fff;
220      font-size: 1.5rem;
221      display: block;
222      padding: 15px 40px;
223      margin-top: 20px;
224      text-align: center;
225      transition: 0.3s;
226      position: relative;
227      text-decoration: none;
228    }
229    .btn::after{
230      content: "";
231      width: 16px;
232      height: 16px;
233      border-top: solid 3px #fff;
234      border-right: solid 3px #fff;
235      transform: rotate(45deg);
236      position: absolute;
237      top: 26px;
238      right: 30px;
239    }
240    .btn:hover {
241      transform:scale(1.2);
242    }
243main{
244  max-width: 860px;
245  margin: 0 auto;
246  text-align: center;
247  margin-bottom: 100px;
248}
249 /*
250
251.fade{
252        height: 300px;
253        margin-top: 10px;
254        position: relative;
255    }
256    .fade li {
257        width: 75%;
258        position: absolute;
259        top: 0;
260        right: 0;
261        opacity: 0;  
262        animation: fade 1s infinite;
263    }
264    .fade li:nth-child(1) {
265        animation-delay: 0s;
266      }
267      .fade li:nth-child(2) {
268        animation-delay: 2s;
269      }
270      .fade li:nth-child(3) {
271        animation-delay: 4s;
272      }
273
274
275  @keyframes fade {
276  0% {
277    opacity: 0;
278  }
279  15% {
280    opacity: 1;
281  }
282  30% {
283    opacity: 1;
284  }
285  45% {
286    opacity: 0;
287  }
288  100% {
289    opacity: 0;
290  }      
291      */
292
293      .bg{
294        background: red;
295        overflow: hidden;
296      }
297.section-title{
298    font-size: 2.25rem;
299    margin: 100px 0;
300    text-align: center;
301    position: relative;
302 }
303.section-title::after{
304  content: "";
305    width: 100px;
306    height: 3px;
307   border-bottom: black solid ;
308    display: block;
309    position: absolute;
310    bottom: -20px;
311    left: 0;
312    right: 0;
313    margin: 0 auto;
314}
315.inview-slide-left {
316  animation: slide-left 0.5s ease-out 0s 1 forwards;
317   margin-bottom: 40px;
318}
319.slide{
320  width: 50%;
321  display: flex;
322  align-items: center;
323  justify-content: center;
324  background-color: #fff;
325  padding: 5%;
326  border-radius: 20px;
327  position: relative;
328}
329.reason_title{
330  font-size:46px;
331  font-weight: bold;
332  margin-bottom: 30px;
333  text-shadow: 0 4px 6px #fff;
334}
335  
336.reason_text{
337  display: block;
338  z-index: 10;
339}
340.slide-right {
341  float: right;
342  animation: slide-right 0.5s ease-out 0s 1 forwards;
343}
344#voice{
345  max-width: 860px;
346  margin: 0 auto;
347}
348
349.student img{
350  width: 200px;
351  height: 200px;
352}
353.student div{
354  display: flex;
355}
356.student div:nth-child(2){
357  flex-direction: row-reverse;
358
359}
360.student dd{
361  background: #e9f1fb;
362  padding: 20px;
363  width: 50%
364}
365.student dt{
366  text-align: center;
367  display: flex;
368  flex-direction: column;
369}
370
371
372```　
373```javascript
374コード
375```         $('.hamburger').on('click', function () {
376                $('.hamburger, .hamburger span:nth-child(1), .hamburger span:nth-child(3)').toggleClass('active');
377            });
378
379
380読みづらくてすいません。
381よろしくお願いします。
382
383

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

回答2件

自己解決

みなさん、ありがとうございます。

ジャバスクリプトを直したら、動きました。

$(function(){
$('.hamburger').on('click', function() {
$('.hamburger, .hamburger span:nth-child(1), .hamburger span:nth-child(3)').toggleClass('active');
});
});

投稿2022/07/24 11:42

y-sasaki

総合スコア54

ハンバーガーメニューをクリックイベントで交差させたい

バツ印にしたい、みたいな話ですか？

css
1	.hamburger.active {
2		background: blue;
3	}
4
5	.hamburger span:nth-child(1) {
6		top: 24px;
7	}
8
9	.hamburger span:nth-child(1).active {
10		transform: rotate(45deg);
11		top: 40px;
12		/* background: blue; */
13	}
14
15	.hamburger span:nth-child(2) {
16		top: 40px;
17	}
18
19	.hamburger.active span:nth-child(2) {
20		display: none;
21	}
22
23	.hamburger span:nth-child(3) {
24		top: 55px;
25	}
26
27	.hamburger span:nth-child(3).active {
28		transform: rotate(-45deg);
29		top: 40px;
30		/* background: blue; */
31	}