～メニューの実装方法～

前提・実現したいこと

html,css,jqueryでボタンを押すとコンテンツが現れるようなものをつくろうとしています。

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

テストで参考サイトのコピペして作ったものはうまくいったのですがid名変更などをしたらできなくなりました。確認してもドkが分からないので質問します。

該当のソースコード

 <div id="menucontents">
   <div id="formenucontent1">
   </div>
  </div>

#headermenu {
 width: 8%;
 float: right;
 cursor: pointer;
 z-index: 1;
}

#menucontents {
 background-color: rgba(255, 255, 255, 1);
 visibility: hidden;
 opacity: 0;

}

.open #menucontents {
 visibility: visible;
 opacity: 1;
}

$(function () {
 var $body = $('body');
 $('#headermenu').on('click', function () {
  $body.toggleClass('open');
 })
});

試したこと

テストで使ったコード

  <link rel="stylesheet" href="">
  <style>
   #menu_btn {
    position: fixed;
    text-align: center;
    width: 100px;
    cursor: pointer;
    z-index: 1;
   }

   #menu-btn span:after {
    content: attr(data-txt-menu);
   }

   .open #menu-btn span:after {
    content: attr(data-txt-close);
   }

   #menu {
    position: fixed;
    display: table;
    background: rgba(0, 0, 0, 255, 0.8);
    visibility: hidden;
    opacity: 0;
   }

   .open #menu {
    visibility: visible;
    opacity: 1;
   }
  </style>
  <script src="jQuery.js"></script>
  <script type="text/javascript">
   $(function() {
    var $body = $('body');
    $('#menu-btn').on('click', function() {
     $body.toggleClass('open');
    })
    $('#menu').on('click', function() {
     $body.removeClass('open');
    });
   });
  </script>

  <meta charset="utf-8">
  <meta name="author" content="timemory">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta http-equiv="content-language" content="ja">
  <meta http-equiv="content-type" content="text/html" charset="utf-8">
  <meta http-equiv="refresh" content=; url="">
</head>

<body>
 <div lass="wrapper">
 </div>

 //headermenu
 <div id="menu-btn">
  <span data-txt-menu="MENU" data-txt-close="CLOSE"></span>
 </div>

 //menucontent
 <nav id="menu">
  <ul>
   <li><a href="#">めぬ</a></li>
   <li><a href="#">めぬ</a></li>
   <li><a href="#">めぬ</a></li>
   <li><a href="#">めぬ</a></li>
  </ul>
 </nav>
</body></html>

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

#headermenuは起動させるためのボタンです。

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

回答2件

ベストアンサー

id="menu-btn"　を　id="headermenu"　に変える場合は

id="menu" を　id="menucontent"　に変える場合も同様で

スクリプトタグ内とスタイルタグ内の

すべての#menu を　#menucontent　に変更します

コメントアウトした箇所をすべて変更すればテスト同様に動作します

html
1  <link rel="stylesheet" href="">
2  <style>
3   #menu_btn {  /* #menu_btn ⇒　#headermenu */
4    position: fixed;
5    text-align: center;
6    width: 100px;
7    cursor: pointer;
8    z-index: 1;
9   }
10
11   #menu-btn span:after {  /* #menu_btn ⇒　#headermenu */
12    content: attr(data-txt-menu);
13   }
14
15   .open #menu-btn span:after {  /* #menu_btn ⇒　#headermenu */
16    content: attr(data-txt-close);
17   }
18
19   #menu {　/* #menu ⇒　#menucontent */
20    position: fixed;
21    display: table;
22    background: rgba(0, 0, 0, 255, 0.8);
23    visibility: hidden;
24    opacity: 0;
25   }
26
27   .open #menu { 　/* #menu ⇒　#menucontent */
28    visibility: visible;
29    opacity: 1;
30   }
31  </style>
32  <script src="jQuery.js"></script>
33  <script type="text/javascript">
34   $(function() {
35    var $body = $('body');
36    $('#menu-btn').on('click', function() {　/* #menu_btn ⇒　#headermenu */
37     $body.toggleClass('open');
38    })
39    $('#menu').on('click', function() {　/* #menu ⇒　#menucontent */
40     $body.removeClass('open');
41    });
42   });
43  </script>
44
45  <meta charset="utf-8">
46  <meta name="author" content="timemory">
47  <meta name="keywords" content="">
48  <meta name="description" content="">
49  <meta http-equiv="content-language" content="ja">
50  <meta http-equiv="content-type" content="text/html" charset="utf-8">
51  <meta http-equiv="refresh" content=; url="">
52</head>
53
54<body>
55 <div lass="wrapper">
56 </div>
57
58 //headermenu
59 <div id="menu-btn">   <!-- id="menu-btn" ⇒　id="headermenu" -->
60  <span data-txt-menu="MENU" data-txt-close="CLOSE"></span>
61 </div>
62
63 //menucontent
64 <nav id="menu">   <!-- id="menu" ⇒　id="menucontent" -->
65  <ul>
66   <li><a href="#">めぬ</a></li>
67   <li><a href="#">めぬ</a></li>
68   <li><a href="#">めぬ</a></li>
69   <li><a href="#">めぬ</a></li>
70  </ul>
71 </nav>
72</body></html>

投稿2019/10/20 05:45

jinba

総合スコア310

jouson-129

2019/10/20 09:42

idの確認している途中にjavascriptのリンクを張ってないことに気づきました。。。それせもid名の確認方法がわかりやすかったので整理できました！！おさがわせしてすみません(´・ω・｀)

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

テストで使ったコードと該当のソースコードが違い過ぎてid名の他になにが変わっているのかぱっと見ではよくわからないのですが、

$('#headermenu').on('click', function () {
  $body.toggleClass('open');

このheadermenuはどこから出てきたのですか？
HTML側のid名を変更したら対応するjs側のid名も変更しないと動きませよ！
もう一度対応関係を確認するべきだと思います

投稿2019/10/20 04:39

pikurusudakedo

総合スコア59

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

～メニューの実装方法～

前提・実現したいこと

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

該当のソースコード

試したこと

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

関連した質問