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

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

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

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

Q&A

解決済

3回答

295閲覧

jQueryでハンバーガーメニューを作成したいのですがjQueryが動作しません

TakahiroFujii

総合スコア3

jQuery

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

0グッド

0クリップ

投稿2019/08/15 09:46

編集2019/08/17 11:24

前提・実現したいこと

現在プログラミングの勉強もかねてホームページを作っています。そこでJQueryを用いたハンバーガーメニューの作成を試みています。

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

Jqueryが全く機能しません

該当のソースコード

Jquery

1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 2<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> 3 4jQuery(document).ready(function($){ 5 $(".menu1").click(function(){ 6 $(.black).fadeIn(200); 7 }); 8}); 9 10</script>

試したこと

https://manablog.org/jquery-not-work/
以上のURL先にあるものを試しましたが動かなかったです。

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

Atomの環境設定が必要であるならその方法を教えていただきたいです。

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

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

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

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

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

yasutomi

2019/08/15 11:34

「AtomでJqueryを使用する方法」と質問タイトルにありますが 質問タイトルが質問内容と一致していないため 「jQueryでハンバーガーメニューを作成したいのですがjQueryが動作しません」 などに変更したほうが良いです。
guest

回答3

0

ベストアンサー

こちらのコードの記述はよくないので参考にしないほうがよいです。
https://manablog.org/jquery-not-work/

HTMLとCSSの詳細が質問に記載されていないので
どのような手法でハンバーガーメニューを作成しようとしているのか不明ですが
jQueryが動作していない点に関しては単純に
HTMLとJavaScriptの記述が間違っていることが原因なので
以下のように修正すれば動作します。

html

1<button class="menu1"></button> 2<div class="black">サンプル</div> 3<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 4<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 5<script> 6$(function() { 7 $('.black').hide(); 8 $('.menu1').click(function() { 9 $('.black').fadeIn(200); 10 }); 11}); 12</script>

投稿2019/08/15 11:31

yasutomi

総合スコア2937

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

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

0

//で始めると実行しているアドレスに依存するので、CDNのページにあるものをそのまま利用されたほうが良いです。

投稿2019/08/15 11:38

m.ts10806

総合スコア80765

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

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

0

HTMLをもらわないとなんとも言えませんが

HTML

1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 2<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 3<script> 4jQuery(document).ready(function($){ 5 $(".menu1").click(function(){ 6 $(.black).fadeIn(200); 7 }); 8}); 9</script>

じゃ、うまくいきませんか?

または

JavaScript

1$(function(){ 2 alert('jQuery読み込まれてるよ!') 3});

で読み込まれているか確認できるのでJavaScriptを$(function(){...に書き換えてみてください
これで読み込まれているのに動かなければ他の部分の問題と考えられます。

投稿2019/08/15 10:22

編集2019/08/15 10:31
kyoya0819

総合スコア10429

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問