Q&A
エラー出てないか確認してください。
ブラウザ開発ツール→コンソール
Jqueryが機能しません。原因を教えてください。よろしくお願いいたします。
jQueryを通して、
成し遂げたいGoalはハンバーガーメニューをクリックすると、slideTggleで<li>のMenuが表示されるようにしたいです。
現状、Googleで検証すると、コンソールに何も表示されていません。読み込まれていないのではないかと思います。
HTML
1 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Toggle Menu</title> 9 <link rel="stylesheet" href="CSS/reset.css"> 10 <link rel="stylesheet" href="CSS/Toggle Menu.css"> 11 <script src="jquery/jquery-3.6.0.min.js"></script> 12 <script src="jquery/Toggle Menu.js"></script> 13</head> 14<body> 15 <header> 16 <h1>Toggle Menu</h1> 17 </header> 18 <nav> 19 <button><img src="img/button.png" width="20" height="17" alt="Button"></button> 20 <ul> 21 <li><a href="#">Menu1</a></li> 22 <li><a href="#">Menu2</a></li> 23 <li><a href="#">Menu3</a></li> 24 <li><a href="#">Menu4</a></li> 25 </ul> 26 </nav> 27 <main> 28 <p> 29 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br> 30 Maecenas porttitor congue massa. Fusce posuere, magna sed <br> 31 pulvinar ultricies, purus lectus malesuada libero, sit amet <br> 32 commodo magna eros quis urna.Nunc viverra imperdiet enim. <br> 33 Fusce est. Vivamus a tellus.Pellentesque habitant morbi <br> 34 tristique senectus et netus et malesuada fames ac turpis egestas. <br> 35 Proin pharetra nonummy pede. Mauris et orci. 36 </p> 37 <p> 38 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br> 39 Maecenas porttitor congue massa. Fusce posuere, magna sed <br> 40 pulvinar ultricies, purus lectus malesuada libero, sit amet <br> 41 commodo magna eros quis urna.Nunc viverra imperdiet enim. <br> 42 Fusce est. Vivamus a tellus.Pellentesque habitant morbi <br> 43 tristique senectus et netus et malesuada fames ac turpis egestas. <br> 44 Proin pharetra nonummy pede. Mauris et orci. 45 </p> 46 </main> 47</body> 48</html>
CSS
1@charset "UTF-8"; 2 3body{ 4 font-family:Arial, sans-serif; 5 -webkit-font-smoothing:antialiased; 6 color:#333; 7} 8 9header h1{ 10 padding:20px 25px; 11 color:#FFF; 12 background:#EA4875; 13 font-weight:bold; 14} 15 16button{ 17 position:absolute; 18 top:17px; 19 right:25px; 20 background-color:transparent; 21 border:none; 22 cursor:pointer; 23} 24 25button:focus{ 26 outline:none; 27} 28 29ul{ 30 display:none; 31 list-style-type:none; 32} 33 34li a{ 35 text-decoration:none; 36 font-weight:bold; 37 display:block; 38 padding:17px 25px; 39 color:#FFF; 40 background:#B94B6A; 41 border-bottom:1px solid #A24861; 42} 43 44li:last-child a{ 45 border-bottom:none; 46} 47 48main{ 49 display:block; 50 padding:40px 20px 20px; 51 color:#333; 52} 53 54p{ 55 margin-bottom:50px; 56 line-height:2em; 57} 58
jQuery
1$(function(){ 2//アイコンをクリック// 3$("button").click(function(){ 4//クリック時の機能 5$("ul").slideTggle(200); 6 7 }); 8});
エラー＝原因
です。
他人に聞かなくても自分で見ることができます。
そもそも「どのように動作するつもりで書いたコードなのか」がないと他人には正解が分からないです。
エラーが出ておらず、読み込まれていないように思います
ゴールは、ハンバーガーメニューをクリックすると、slideTggleで<li>のMenuが表示されるようにしたいです。
質問は編集できます。状況追記してください。
「読み込まれてない」ならエラーが出ています。
jsファイルに対する404エラー。
404エラーが出てないなら読み込まれています。
回答2件
0
ベストアンサー
エラー出てますよ。
Uncaught TypeError: $(...).slideTggle is not a function
機能の確認はドキュメント
.slideToggle()
名前が決まっているものはコピペするくらいの慎重さがあってちょうどいいです。
現状、Googleで検証すると、コンソールに何も表示されていません。読み込まれていないのではないかと思います。
読み込まれてなければ404エラーが出るし、
読み込まれていれば回答に提示したエラーが出ます。
何も出ないというのはあり得ないコードです。
投稿2021/04/23 10:05
編集2021/04/23 10:07総合スコア80875
ありがとうございます。原因は私のスペルミスでした。動きました。ありがとうございます。
で、どこを確認して「何も表示されません」と仰っているのでしょうか。
こちらの意図と違うものを見ているような気がしてなりません。
そこが違うと今後「エラー観て」と言っても無駄になります。
あと大事なので補足しますが、これを「スペルミス」で終わらせてしまうと同じミスを繰り返します。
命名されたものを正しく使ってないというところですね。
ドキュメント観る癖をつけてください。
0
<script src="jquery/jquery-3.6.0.min.js"></script>
<script src="jquery/Toggle Menu.js"></script>
開発画面でみてコンソールでjquery-3.6.0.min.jsはちゃんと読まれていますか？
「Toggle Menu.js」相当怪しいです
投稿2021/04/23 09:23
総合スコア116724
読み込まれていませんでした。考えられるところを確認しました。（ファイル間違いかどうか/きちんとjQuery本体＝jquery-3.6.0.min.jsがjqueryフォルダーにあるか)を確認しましたが、表示されません！
ネットに直接参照してもよいかもしれません
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
即、ご回答いただきありがとうございます。
yambejpさんの「<script src～」コピー＆ペーストで試してみましたが、結論変わりませんでした！
あなたの回答
tips
プレビュー
