Q&A
jQuery 1.7.2を指定しているのは、何か意図があってのことでしょうか？
前提・実現したいこと
iSara模写で、jQueryを使用しています。
ページ下部のよくある質問の部分で使用したいと考えていますが、動作せず困っています。
発生している問題・エラーメッセージ
カーソルを該当部分に合わせると矢印から指のマークには変わります。 しかし、クリックしても出てくるはずのテキストが出てきません。
該当のソースコード
http
1<head> 2 <link rel="stylesheet" type="text/css" href="isara.css"> 3 <title>模写-iSara</title> 4 <div class="logo"><img src="isaralogo.png" alt="logo" title="logo" width="128"></div> 5 <div class="title"><b>バンコクのノマドエンジニア育成講座</b></div> 6 <div class="form1"> 7 <a href="#">お問い合わせ / 資料請求はこちら</a> 8 </div> 9 <div class="top"><p class="p-top"><b><span style="font-size:28px">プログラミングで<br>人生の安定を 10 手に入れよう</span><br><img src="isaralogo.png"><br><span style="font-size:20px">バンコクの 11 ノマドエンジニア育成講座<br>iSara[イサラ]</span></b></p></div> 12 <link href="https://use.fontawesome.com/releases/v5.6.4/css/all.css" rel="stylesheet"></link> 13 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 14 15</head> 16<body> 17 <div class="question"> 18 <div class="question-about"><b>よくある質問</b></div> 19 <!-- slideToggle --> 20 <div class="ttl" id="ttl1"> 21 <b>プログラミングスキルは必要ですか？</b> 22 </div> 23 <div class="txt" id="txt1"> 24 <b>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 25 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点 26 だけはご了承ください。</b> 27 </div> 28 </div> 29 <div id="sample01"> 30 <dl id="acMenu"> 31 <dt>アコーディオンメニュー</dt> 32 <dd>openメニュー</dd> 33 <dt>アコーディオンメニュー</dt> 34 <dd>openメニュー</dd> 35 <dt>アコーディオンメニュー</dt> 36 <dd>openメニュー</dd> 37 </dl> 38 </div> 39</body> 40
css
1#acMenu dt{ 2 display:block; 3 width:200px; 4 height:50px; 5 line-height:50px; 6 text-align:center; 7 border:#5bc0de 1px solid; 8 cursor:pointer; 9 } 10 11#acMenu dd{ 12 background:#d9534f; 13 width:200px; 14 height:50px; 15 line-height:50px; 16 text-align:center; 17 border:#5bc0de 1px solid; 18 display:none; 19} 20
jQuery
1$(function() { 2 $("#acMenu dt").on("click", function() { 3 $(this).next().slideToggle(); 4}); 5}); 6 7$(function() { 8 alert('OK!'); 9}); 10
試したこと
jQuery
1$(function() { 2 alert('OK!'); 3});
上記のコードを使用してみましたが、ポップアップも表示されませんでした。
また、上記のコードの他にも、
jQuery
1(function($){ 2 // ここにコードを記述 3})(jQuery);
jQuery
1jQuery(document).ready(function($){ 2 // ここにコードを記述 3});
jQuery
1jQuery(function() { 2// ここにコードを記述 3});
jQuery
1jQuery(document).ready(function($){ 2 $(document).ready(function(){ 3 // ここにコードを記述 4 }); 5});
jQuery
1jQuery(document).ready(function($){ / 2 jQuery(document).ready(function(){ 3 // ここにコードを記述 4 }); 5})
これらのコードも試してみました。
しかし、そもそも
jQuery
1$(function() { 2 alert('OK!'); 3});
が反映されていないので、読み込みの時点で誤りがあると推測していますが、原因を見つけられませんでした。
どなたかエラーのある部分をお教え頂けますでしょうか。
よろしくお願いします。
その他
使用環境はAtom、Google chromeです。
ご指摘頂き、ありがとうございます。
たくさんのサイトを検索していたら、何年も前のサイトにもたどり着いていて、そこからコピペしたものでした。
新しいものに変更します。
回答1件
0
ベストアンサー
ええと、自作のJavaScriptのコードを読み込んでいる部分が見当たりません。とりあえず、提示された内容のコードを適当な名前で作ってhead要素内で読み込ませたら、メニューは出てきました。
ほかにも、
- jQuery古すぎない?
- head要素とheader要素を混同してない?
などのツッコミどころが。
投稿2020/08/08 06:08
編集2020/08/08 06:09
総合スコア11990
ご回答頂き、ありがとうございます。
自作のJavaScriptのコードを読み込んだら出てきました。
jQueryも新しいものに変更します。
今調べてみたらheadとheaderの違いが分かりました。
ありがとうございました。
あなたの回答
tips
プレビュー
