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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3233閲覧

javascriptがhtmlに反映されてない

kolon.m

総合スコア69

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/07/05 21:59

lang

1<head> 2</head> 3<body> 4 5<style type="text/css"> 6#acMenu dt{ 7 display:block; 8 width:200px; 9 height:50px; 10 line-height:50px; 11 text-align:center; 12 border:#666 1px solid; 13 cursor:pointer; 14 } 15#acMenu dd{ 16 background:#f2f2f2; 17 width:200px; 18 height:50px; 19 line-height:50px; 20 text-align:center; 21 border:#666 1px solid; 22 display:none; 23 } 24</style> 25 <dl id="acMenu"> 26 <dt>アコーディオンメニュー1</dt> 27 <dd>アコーディオンメニューが開く。</dd> 28 <dt>アコーディオンメニュー2</dt> 29 <dd>アコーディオンメニューが開く。</dd> 30 <dt>アコーディオンメニュー3</dt> 31 <dd>アコーディオンメニューが開く。</dd> 32 </dl> 33<script> 34 $(function(){ 35 $("#acMenu dt").on("click", function() { 36 $(this).next().slideToggle(); 37 }); 38 }); 39</script> 40</body> 41</html> 42 43 44 45 46 47 48</body> 49</html> 50

http://liginc.co.jp/web/js/jquery/34048このサイトを見ながら
以上のようにコードを書いたのですが、CSSまではhtmlに反映されているみたいなんですが、javascriptで反映されているはずのアニーメーションがありません。
何回考えてもわかりません。どなたか私にご教授お願いします。

追記で

lang

1<script src="js/script.js"></script> 2

上記のサイトのでもでこんなコードがありました。
これと何か問題でもあるのでしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

こんにちは。

おそらく JQuery 自体を読み込んでいないのだと思います。
これを含め、ご質問にあるコードを以下の点で修正しました。

  • アコーディオンを初期化する前に、JQueryを読み込む。
  • <script>は、<head>の中に入れる。
  • <style>も、<head>の中に入れる。

lang

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>12283</title> 6<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 7<script> 8 $(function(){ 9 $("#acMenu dt").on("click", function() { 10 $(this).next().slideToggle(); 11 }); 12 }); 13</script> 14<style type="text/css"> 15#acMenu dt{ 16 display:block; 17 width:200px; 18 height:50px; 19 line-height:50px; 20 text-align:center; 21 border:#666 1px solid; 22 cursor:pointer; 23 } 24#acMenu dd{ 25 background:#f2f2f2; 26 width:200px; 27 height:50px; 28 line-height:50px; 29 text-align:center; 30 border:#666 1px solid; 31 display:none; 32 } 33</style> 34</head> 35<body> 36 <dl id="acMenu"> 37 <dt>アコーディオンメニュー1</dt> 38 <dd>アコーディオンメニューが開く。</dd> 39 <dt>アコーディオンメニュー2</dt> 40 <dd>アコーディオンメニューが開く。</dd> 41 <dt>アコーディオンメニュー3</dt> 42 <dd>アコーディオンメニューが開く。</dd> 43 </dl> 44</body> 45</html>

上記をコピペして、q12283.html というHTMLファイルを作成して
以下のURLから見えるサーバーにUPしました。

http://www.gattolibero.sakura.ne.jp/teratail/q12283.html

いちおう、それらしく動いてはいますが、

<dd>の幅を広げたり、見栄えを良くする 調整が必要かもしれません。

ご参考になれば幸いです。

投稿2015/07/05 22:14

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>

Jqueryのライブラリ参照が抜けているからではないでしょうか?

投稿2015/07/05 22:08

takayukiinaba

総合スコア1158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

コードの内容が欠けているので憶測になりますが、jQuery本体を読み込めていないか、あるいはHTMLが間違えているのだと思います。

投稿2015/07/05 22:15

flat

総合スコア617

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問