jQueryを使ってアコーディオンメニューを作成する方法とは？
- jQueryを使用してアコーディオンメニューを作成する方法についてわかりませんか？jQueryのファイルのダウンロード方法や配置場所、記述方法について教えてください。
- jQueryのファイルはuncompressedのものをダウンロードし、jQuery.jsとリネームしてjsフォルダ内に格納します。アコーディオンメニューの作成方法はHTML、CSS、jQueryの３つの記述が必要ですが、jQueryの記述方法やファイルの配置場所がわかりません。具体的な手順をご教示ください。
- jQueryを使用してアコーディオンメニューを作成する方法について調べているのですが、どのファイルにjQueryを書くかがわかりません。どのような名前の拡張子のファイルにjQueryを読み込ませるのか、またはHTMLファイル内に直接書くのか教えてください。
- ベストアンサー
jQuery を書くファイルはどれですか
ほんっとうに基本的なことすぎて見つけられないのかもしれないのですが、 2日間ググってもわからないのでお助けください。 jQuery でアコーディオンメニューを作りたいと思っています。 だいたいのサイトをみると、サイトより jQueryをダウンロードしろと 書かれているのでuncompressedのものをダウンロードして、jQuery.jsと リネームしたのちに jsフォルダ内に格納しました。 あとは、html、CSS、jQuery の3つの記述が掲載されているのですが、 jQuery をどこに書くのかわかりません。 どういう名前のどの拡張子(js？)でhtmlファイルに読み込ませるのか、 それともhtmlファイルに書くのかすらわかりません。 なにとぞご教示お願いいたします。
- poifulls
- お礼率88% (16/18)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
jQueryを書くという意味がよくわかりませんが、jQueryを使えるようにするにはHTMLファイルの<head>～</head>の間に <script src="js/jQuery.js"></script> と書けばjQueryの機能が利用できるようになります。 jQueryを使ったJavaScriptのプログラムは、HTMLファイルの適当なところに <script>～</script> を用意して、scriptタグに囲まれた中に記述すれば動きます。 複数のページで同じプログラムを使うなら適当な名前のファイル（hoge.js とか）を用意して、その中にプログラムを書き、先のjQueryの読み込み同様<head>～</head>の間に <script src="js/hoge.js"></script> と書けば動きます。
その他の回答 (2)
- kinta03
- ベストアンサー率41% (7/17)
大変失礼かと思いますが・・・回答させて下さい。 「2日間ググってもわからない・・・」と有りますが？ jQueryで検索すれば色々なサイトが見つかります。 そこにはサンプルのhtmlやJavaScript(当然jQueryも含んだ物)が有ります。 それもステップを追って解説してあるサイトも見つかります。 当然、アコーディオンメニューもサンプルで出てきます。 短絡的な回答／サンプルのみ求めて何も試していないのでは有りませんか？ ２日間も有れば簡単なアコーディオンメニューも作成できると思います。 それらをやって見れば「どこに書くのかわかりません」などと言う質問は出てきません。 短絡的にコピペで出来るものを求めているのなら「[技術者向] コンピューター」で質問する以前の問題です。 すでに回答を頂いている２名の方にも失礼に成ります。 基本的に（麦僊とした概念を質問する場合を除いて） ・・・の環境で使っています ・・・を参考に 自分は・・・で・・・すれば出来ると思い ・・・したけど ・・・出来ませんでした ・・・のエラーが出ます（または誤動作します） ・・・の様な使い方は（考えは） ・・・などの自身の試行錯誤が垣間見えるのは、とても微笑ましく皆さん回答すると思います。 極端な言い方をすれば 「ホームページを書きたいのですがホームページは何処に有りますか？」 と、似たような質問だと思います。２日間、何をしていたのですか？ 御免なさい、大変お気に触ることばかり書いてしまいました。 今日はチョイト機嫌が悪いのかも知れません？！？！ 最後に、 コンピュータの世界は簡単なコピペでは何も作れません。 一時的にコピペで出来ても、そこから消化／吸収して本物を作ってください。
お礼
まず、回答になっていませんし、謝るくらいなら書かないでください。 先のお二人は、意味不明な質問内容にも関わらず想像でも回答をしてくださいました。 わたしの質問の仕方がなってなかったと反省はしています。 アコーディオンのサンプルページでは、html、css、jQueryの3つのプログラムに分かれており、 jQueryと書かれた部分がどこにはいるのかわからなかったのです。 どのサイトを参考にしているか記載すれば、よい質問ができたかもしれません。
fire fox で書き込めます
お礼
回答ありがとうございます。 fire fox でも書き込むことができるのですね。 もう少し詳しくなってから試してみます。
関連するQ&A
- jQueryのアコーディオンメニュー デフォルトでの開閉
jQueryのアコーディオンメニュー デフォルトでの開閉 すでに掲載されている http://okwave.jp/qa/q5978950.html 「jQueryのアコーディオンメニュー 開閉の制御」では 解決できませんでしたので質問です。 アコーディオンメニューにおいて 添付ファイルのように a.htmlを開いたら、1番上のアコーディオンが開いてる状態 b.htmlを開いたら、2番上のアコーディオンが開いてる状態 c.htmlを開いたら、3番上のアコーディオンが開いてる状態 にしたいのですが、 どうもうまくいきません。。。 メニューが２つならできるのですが ３つになるとさっぱりわからなくなります。 特にアコーディオンを使うための.jsにこだわりはないのですが （開閉時にスムーズに動く事ができればどれでも構わないです） これが可能になるjsはどこかにないでしょうか？ もしくは、どうすればこれが可能になりますでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- なぜｊQuery UIを使う時こんなにｊｓファイルを使うの？
どうもはじめまして。 早速ですがjQueryについて質問です。 jQuery UIのアコーディオンにしてもtabsにしても、使う時4つも5つもｊｓファイルを取り込みますよね？これってなぜなんでしょうか？ 単純にコピー＆ペーストで一つにまとめることってできないのでしょうか？ 知っている方いましたらよろしくお願いします。
- 締切済み
- JavaScript
- ｊQuery
http://ascii.jp/elem/000/000/498/498710/ 上記サイトの6page目をみて、サイトに手順のあるｊQuerｙアコーディオンを作成しようとおもったのですが、クリックすると２番目と3番目のｄｄの部分が表示されるのですが、私のは最初からｄｄの画像が 3枚とも表示されています。 私の作成したサイトのｈｔｍｌ、ｃｓｓの記述は以下です。 また、ｊｓフォルダにはjquery.animate-colors-min と jquery.easying.1.3と jquery.skitterと jquery-1.6.3.minが入っていて、jqueryskitterをダウンロードしたときのものです。それが間違いでしょうか？ 上記サイトでは他のバージョンを使っているので、それをダウンロードしないとダメなのでしょうか？ <script>の記述が間違っているのでしょうか？ 何卒ご教授お願い致します。 ○ｈｔｍｌ部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メニューページ</title> <link href="all.css" rel="stylesheet" type="text/css" media="all" /> <script type="test/javascript" src="js/jquery-1.6.3.min.js"></script> $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); </head> <body> <dl> <dt>course</dt> <dd> <p><img src="image/menu1_03.jpg" width="728" height="515" /></p> </dd> <dt>a la calt</dt> <dd> <p><img src="image/menu2_03.jpg" width="763" height="560" /></p> </dd> <dt>waine</dt> <dd> <p><img src="image/manu3_03.jpg" width="763" height="561" /></p> </dd> </dl> </body> </html> ○CSS部分*他のhtmlページともリンクしているため、下記以外にも書いてあります *{ margin:0; padding:0; } a imag{ border:none; } dl{ width:763px; margin:50px auto; } dl dt{ background:#7CADB6; border-bottom:1px solid #FFFFFF; cursor:pointer; } dl dd{ border:1px solid #7CADB6; border-top:none; height:561px; }
- ベストアンサー
- JavaScript
- jqueryが動作しない
jqueryが動作しません。 私が行った手順を書きます。jqueryのサイトからdownloadをします。英文だったのでDreamweaverで開いて名前を付けて別名で保存しました。jquery-1.8.0.js拡張子で保存。 ソースコードをかいてみました。 <html> <head> <script src="jquery-1.8.1.min.js"></script> // urlを指定した場合です。 <script src="http]//jquery-1.8.1.min .js"></script> </head> <body> <h1>Jquery</h1> <script> $(function(){ $('h1').css('color'.'red'); }); </script> </body> </html> これを保存します。（拡張子は.navi.html) 実行しても動作しません。どうしてでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- たすけて！ｊQueryがさっぱりわかりません！
Dreamweaverでサイトを制作しています。 ｊQueryは何をどこにダウンロードして何をどこにうちこめばいいのか？ さっぱりわかりません…。 http://jquery.com/からなにかをダウンロードするということはわかるのですが…。いろいろありすぎて何をダウンロードすればいいのか…。 しかもダウンロードしたファイルはどこに保存してどうやってhtmlとむすびつけるのか。 タグはhtmlのどこに書けばいいのか、くわしく赤ちゃんに説明するつもりで教えていただけると助かります。 ちなみに（http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/）を使いたいのです。 サイトを見たのですがこのコードはどこにいれたらいいのかさっぱりわかりません。 head内なのかbodyなのかはたまた別でcssを作るのか？ 【質問まとめ】 ・（http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/）のギャラリーをつかいたいが取り込み方がわからない。 ・上記URLからのダウンロード以外で（http://jquery.com/）からのダウンロードは必要なのか？ ・ダウンロードしたものはファイルのどこにいれたらいいのか。 ・どうすれば現在つくっているhtmlにｊｓをむすびつけられるのか？ ・head、bodyそれぞれになにをいれたらいいのか？ ・ともかくなにをどこにいれたらいいのかさっぱりわかりません。 ・こういうものは$(function(){})どこにいれたらいいのか、これはなんなのか？ 質問が多くてすみません。どうかよろしくお願いします。
- 締切済み
- JavaScript
- jqueryの呼び出しはどこに？bxSlider
サイトを作っています。 bxSlider というものを入れたいのです。 こちらのサイト http://wp-and.me/bxslider/ で説明があるとおりに bxSliderの公式サイトからファイルをダウンロードし、 jsのファイルをローカルのフォルダへ入れました。 htmlではheadにファイルへのリンクを記述しました。 htmlに説明通りにコードも記述しましたが、ここからが分かりません。 サイトには、 最後に、bxSliderの呼び出しをすればスライドが動きます！ $(document).ready(function(){ $('.bxslider').bxSlider(); }); と書いてありますが、これはどこに書くんでしょうか？ htmlのhead内？ ダウンロードしてきたjsファイルのどこか？ 他にもいくつかのサイトをみたのですが、 みんな「最後に関数を呼び出してください」くらいの説明しかなく どうやって実行したらいいのか分かりません。 あと、jqueryはサーバーにアップしなくても動作確認はできるのでしょうか？ もしかしてローカルで作業しているのがいけないのでしょうか？ どうか教えてください。。。
- ベストアンサー
- JavaScript
- jqueryによるアコーディオン表示
http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。 上記サイトのデモではアコーディオンメニューをクリックするとその下に 「アコーディオンメニューが開く」という文字列が表示されます。 しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。 【表示イメージ】 アコーディオンメニュー１ アコーディオンメニュー アコーディオンメニュー２ アコーディオンメニュー アコーディオンメニュー３ アコーディオンメニュー 下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように アコーディオンメニューが表示されますでしょうか。 また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を 改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。 line-height を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更 されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。 【HTML】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#acMenu dt").click(function() { $(this).next().slideToggle(); $(this).toggleClass("active"); }); }); </script> <title>CSS</title> <style type="text/css"> #acMenu dt{ display:block; width:250px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; cursor:pointer; background:url(../images/i_swich.png) 220px -69px no-repeat; padding-right:15px; } #acMenu dd{ background:#f2f2f2; width:250px; height:150px; line-height:50px; text-align:center; border:#666 1px solid; display:none; } #acMenu dt.active{ background:url(../images/i_swich.png) 220px 18px no-repeat; } </style> </head> <body> <dl id="acMenu"> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニュー1が開く。<BR>改行した。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニュー2が開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニュー3が開く。</dd> </dl> </body> </html>
- ベストアンサー
- CSS
- WordPressでjQuery-UIの使い方
WordPressでjQuery-UIの使い方を教えてください。 現在、WordPressで作ったサイトにフローティングメニューを取り入れたいと思っています。 フローティングメニューを入れるにあたり、jQuery-UIを読み込まなければならないのですが ちゃんと読み込まれていないようです。 WordPressではなくテストでサイトを作り、読み込ませるとちゃんと動作するので、 WordPress特有の問題かと思います。 WordPressでjQuery-UIを読み込ませる方法を教えてください。 下記に参考にしたサイトと、ソースを記述しました。 -------WordPressのヘッダ内の記述と参考にしたサイト------- <?php wp_deregister_script('jquery.ui.core.min'); wp_enqueue_script('jquery.ui.core', get_bloginfo('template_url') . '/js/jquery.ui.core.js'); ?> wp_deregister_scriptでWordPressのjquery.uiを見に行かないようにして、 wp_enqueue_scriptでダウンロードしてきたＵＩを見に行くようにしてあります。 参考にしたサイト（jQuery-UI） http://d.hatena.ne.jp/deeeki/20090907/wp_enqueue_jquery_ui フローティングメニューについて参考にしたサイト http://www.skuare.net/test/jScrollFollow.html
- ベストアンサー
- PHP
- jQuery
http://blog.daichifive.com/archives/602 このページにあるようなスクロールをさせたいのですが、 jquery.scroller.d5.jsはページ内でダウンロードできますが、 jquery.jsはどこからダウンロードすればよいのですか？ jQueryeasysliderのjqueryjsをつかってみたのですが、 上記サイトではjsファイルの最下部でスクロールさせたいものだけをカスタマイズできるとあるので、 easysliderのjqueryjsは使えないような気がします。 初歩的な質問ですみません。 あまり詳しくないです。 宜しくお願いします。
- ベストアンサー
- CSS
- jQueryでタブの中に表を入れる
ｊQueryを使ってページを表示させようと思っています。 その中で、 http://5am.jp/jquery/jquery_ui_tabs/ このタブのメニューの中に http://styler.jp/blog/2013/01/18/handsontable/ こちらの表を入れ込みたいのですが、どうも上手く行きません。 css/jquery.handsontable.full.cssとjs/jquery.handsontable.full.js、js/jquery-2.min.jsを指定するとタブが上手く表示されず、外すとタブは表示されるのですが表が出て来ません。 どなたか似たようなことやったことのある方、ご教授よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
質問の意味がわかりづらくて申し訳ありません。 どういうふうに説明していいかわからないほど、わかっていませんでした。 <script>～</script>にアコーディオンのjQueryを書けばできました。 html、css、jQuery.js、jQueryでやりたいことのうち、 jQuery でやりたいことをどこに書いてよいかわからなかったのです。 ありがとうございました。