ハンバーガーメニューをクリックした際にメニューを表示させる方法


HTML CSS jQueryを用いて、ハンバーガーメニューを作ったのですが、クリックしても表示したいメニュー画面が出てきません。どこが間違っているのでしょうか。

### 発生している問題・エラーメッセージ
ハンバーガーメニューをクリックしても予定されている動作が行われない。

エラーメッセージ
特になし

該当のソースコード

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Write-書くためのテーマ</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="stlesheet3.css">
    
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="javascript4.js"></script>
</head>
<header>
<nav id="nav">
      <ul class="nav_menu_ul">
        <li><h1><a href="#">ホーム</a></h1>
          <h2><a href="">→カスタマイズ</a></h2>
        </li>
        <li><h1><a href="#">ページ</a></h1>    
          <h2><a href="#">アイキャッチ画像なしのページ</a></h2>
          <h2><a href="#">ページ（全幅テンプレート）</a></h2>
        </li>
        <li><a href="#">タイポグラフィー</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
    
    <span id="nav_toggle">
      <i></i>
      <i></i>
      <i></i>
    </span>
  </header>
</html>

#nav_toggle { 
  display: block;
  position: absolute;
  right:1.75em;
  top:1.5em;
  width:1.75em;
  height: 1.5rem;
 }
#nav_toggle i {
 display: block;
 width: 100%;
 height: 2px;
 background-color: #333;
 position: absolute;
transition: transform .5s, opacity .5s;
 }                                        
#nav_toggle i:nth-child(1) {
  top: 0;
 }
#nav_toggle i:nth-child(2) {
 top: 0;
 bottom: 0;
 margin: auto;
  }
 #nav_toggle i:nth-child(3) {
  bottom: 0; 
 }
 #nav_toggle.show i:nth-child(1) {
 transform: translateY(10px) rotate(-45deg);
 }
 #nav_toggle.show i:nth-child(2) {
   opacity: 0;
 }
  #nav_toggle.show i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
  }
                                                    
  header>nav{
   position:fixed;
   top: 3rem;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 1rem;
   opacity: 0;
   visibility: hidden;
   transition: opacity .5s, visibility .5s;
   } 
 #nav.show {
  opacity: 1;
  visibility: visible;
   }

$('#nav_toggle').on('click', function () {
  $('#nav_toggle').toggleClass('.show');
  $('#nav').toggleClass('.show')
  });コード

試したこと

html内のclassをidに変えたり、jQueryのバージョンを変えたりしましたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

VScodeでやっています。

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

回答1件

ベストアンサー

jQueryのセレクタが違います。セレクタについておさらいしとくといいかもしれません。
ハンバーガーメニューもトグルメニューも１つしかないはずなのでidをふってあげると構造的にも分かりやすいですし、動作も軽くなるのでおすすめです。

js
1$(".nav_toggle").on("click", function () {
2    $(".nav_toggle, .nav").toggleClass("show");
3});

投稿2020/02/20 07:46

zushi0905

総合スコア683

arrow9854

2020/02/21 08:56

html内のクラスをidにし、css内のshowをつける前のものをid表記にし、javascriptを $('#nav_toggle').on('click', function () { $('#nav_toggle').toggleClass('nav_toggle.show'); $('#nav').toggleClass('nav.show') }); に変更し、showをつけた後をクラスでCSSが動くようにしたのですが、うまくいきませんでした。まだ、セレクタが違うでしょうか。何度も質問してしまいすみません。

zushi0905

2020/02/21 09:54

idはあっている前提でcssはidのものに変更したと思って答えますよ。 $('#nav_toggle').on('click', function () { $('#nav_toggle').toggleClass('.show'); $('#nav').toggleClass('.show') }); これで動かなかったら、質問のソースコードを更新してコードブロックに入れて読めるようにして再度コメントしてください。

arrow9854

2020/02/21 14:45

javascriptのコードを変更しましたが、うまく動きませんでした。質問画面を変更し、コードブロックに入れました。何卒よろしくお願いします。

zushi0905

2020/02/22 11:02

ごめんなさい。コード間違えていました。 $('#nav_toggle').on('click', function () { $('#nav_toggle').toggleClass('show'); $('#nav').toggleClass('show') }); addclassで指定するクラス名はドットはいらないです。toggleClassの引数はセレクタではなくクラス名だからです。

arrow9854

2020/02/24 03:51

コードを変更しましたが、動きませんでした。ディベロッパーツールで確認した所idの変更は行われていませんでした。

zushi0905

2020/02/24 06:04

動きます。少なくともこちらの環境では動いているので、ソースコードの読み込みの問題、またはブラウザの設定などそちらの環境の問題になります。 idの変更の意味が分かりません。ソースコードの変更が行われていないということですか？

arrow9854

2020/02/24 13:03

javascriptの部分を直接HTML内に記述したら動きました。おそらく、javascriptとhtmlが連動していなかったためだと思います。何度も質問を答えていただきありがとうございます。

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