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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

y-sasaki
y-sasaki

総合スコア44

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

-1評価

1クリップ

262閲覧

投稿2022/07/22 12:59

前提

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

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

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

該当のソースコード

HTML

コード ```<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>課題テンプレ</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> <script src="js/script.js"></script> </head> <body> <header id="header"> <div class="logo"> <h1 class="title">BBB</h1> <span>英会話スクール</span> </div> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </header> <main> <div id="mainvisual"> <img src="../web3/img/mainvisual1.jpg" alt="main1"> </div> <div class="text"> <P class="title">話して学ぼう<br> BBB英会話スクール </P> <a class="btn" href="#">無料体験はこちらから </a> </div> <section id="reason"> <h2 class="section-title">BBBが選ばれる理由</h2> <div class="bg"> <div class= "slide inview-slide-left slide-left"> <img src=""> <p> <span class="reason_title">オンライン対応</span> <span class="reason_text">24時間いつでも受講できる!</span> </p> </div> <div class="slide inview-slide-right slide-right"> <img src=""> <p> <span class="reason_title">講師はネイティブ</span> <span class="reason_text">お気に入りの行使が自由に選べる!</span> </p> </div> </div> </section> <section id="voice"> <h2 class="section-title">受講生の声</h2> <dl class="student"> <div> <dt><img src="../web3/img/profile_icon.png"><span>○○さん<br></span><大学生</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </div> <div> <dt><img src="../web3/img/profile_icon.png"><span>○○さん<br></span>会社員</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </div> <div> <dt><img src="../web3/img/profile_icon.png">○○さん<br></span>会社員</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </div> </dl> </section> <section id="summary"> <h2 class="section-title">スクールの概要</h2> <dl class="summary-list"> <div> <dt class="menu-title"><span class="ja">レッスン内容</span><br><span class="en">LESSON</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </div> <div> <dt class="menu-title"><span class="ja">料金プラン</span><span><br><span class="en">PRICE</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </div> <div> <dt class="menu-title"><span class="ja">講師の紹介</span></span><br><span class="en">TEACHER</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </div> <div> <dt class="menu-title"><span class="ja">BBBのQ&A</span><br><span class="en">Q&A</span></dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </div> </dl> </section> <div id="entry"> <p class="title">まずは無料で、BBBの英会話を試してみませんか?</p> <p class="catchphrase">今なら初月のレッスンを特別価格で受講できる割引クーポンをプレゼント!</p> <a class="btn" href="#">無料体験に申し込む</a> </div> </main> <footer> <ul class="footmenu"> <li><p class="title">コース一覧</p> <ul class="menu"> <li><a href="#">スタンダードプラン</a></li> <li><a href="#">プレミアムプラン</a></li> <li><a href="#">短期集中プラン</a></li> <li><a href="#">日常英会話コース</a></li> <li><a href="#">ビジネス英会話コース</a></li> </ul> </li> <li><p class="title">講師紹介</p> <ul class="menu"> <li><a href="#">講師について</a></li> <li><a href="#">講師一覧</a></li> <li><a href="#">講師を探す</a></li> </ul> </li> <li><p class="title">会社概要</p> <ul class="menu"> <li><a href="#">会社概要</a></li> <li><a href="#">採用情報</a></li> </ul> </li> <li><p class="title">BBBについて</p> <ul class="menu"> <li><a href="#">よくあるご質問</a></li> <li><a href="#">ご利用規約</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </li> </ul> <p class="copyright">© BBB English School</p> </footer> </body> </html> ```CSS CSSの該当部分はとりあえず動くかどうかの動作確認のために背景色を変えるだけになってます。 コード *{ margin:0; padding:0; } .logo{ color: red; vertical-align: bottom; line-height: 25px; } .title{ text-align: left; font-size:45px; font-weight: bold; text-shadow: 0 4px 6px #fff; } #header{ padding: 40px 0 0 50px; } .logo span{ vertical-align: bottom; font-size: 15px; } .hamburger{ background-color: #ff2a2a; position: fixed; width: 100px; height: 100px; top: 0; right: 0; z-index: 30; cursor: pointer; transition: 0.3s; } .hamburger span{ width: 35px; height: 2px; position: absolute; left: 33px; background: white; } .hamburger.active{ background: blue; } .hamburger span:nth-child(1){ top: 24px; } .hamburger span:nth-child(1).active{ transform: rotate(45deg); background: blue; } .hamburger span:nth-child(2){ top: 40px; } .hamburger span:nth-child(3){ top: 55px; } .hamburger span:nth-child(3).active{ transform: rotate(45deg); background: blue; } #mainvisual{ position: relative; margin-bottom: 120px; } #mainvisual img{ width: 100%; } .text{ display: block; z-index: 10; position: absolute; top: 280px; left: 25%; } .btn{ background-color: #ff2a2a; border-bottom: 6px solid #9a0413; border-radius: 10px; color: #fff; font-size: 1.5rem; display: block; padding: 15px 40px; margin-top: 20px; text-align: center; transition: 0.3s; position: relative; text-decoration: none; } .btn::after{ content: ""; width: 16px; height: 16px; border-top: solid 3px #fff; border-right: solid 3px #fff; transform: rotate(45deg); position: absolute; top: 26px; right: 30px; } .btn:hover { transform:scale(1.2); } main{ max-width: 860px; margin: 0 auto; text-align: center; margin-bottom: 100px; } /* .fade{ height: 300px; margin-top: 10px; position: relative; } .fade li { width: 75%; position: absolute; top: 0; right: 0; opacity: 0; animation: fade 1s infinite; } .fade li:nth-child(1) { animation-delay: 0s; } .fade li:nth-child(2) { animation-delay: 2s; } .fade li:nth-child(3) { animation-delay: 4s; } @keyframes fade { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } */ .bg{ background: red; overflow: hidden; } .section-title{ font-size: 2.25rem; margin: 100px 0; text-align: center; position: relative; } .section-title::after{ content: ""; width: 100px; height: 3px; border-bottom: black solid ; display: block; position: absolute; bottom: -20px; left: 0; right: 0; margin: 0 auto; } .inview-slide-left { animation: slide-left 0.5s ease-out 0s 1 forwards; margin-bottom: 40px; } .slide{ width: 50%; display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 5%; border-radius: 20px; position: relative; } .reason_title{ font-size:46px; font-weight: bold; margin-bottom: 30px; text-shadow: 0 4px 6px #fff; } .reason_text{ display: block; z-index: 10; } .slide-right { float: right; animation: slide-right 0.5s ease-out 0s 1 forwards; } #voice{ max-width: 860px; margin: 0 auto; } .student img{ width: 200px; height: 200px; } .student div{ display: flex; } .student div:nth-child(2){ flex-direction: row-reverse; } .student dd{ background: #e9f1fb; padding: 20px; width: 50% } .student dt{ text-align: center; display: flex; flex-direction: column; } ```  ```javascript コード ``` $('.hamburger').on('click', function () { $('.hamburger, .hamburger span:nth-child(1), .hamburger span:nth-child(3)').toggleClass('active'); }); 読みづらくてすいません。 よろしくお願いします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。