- ベストアンサー
Jqueryアコーディオンについて
- Jqueryを使って2段のアコーディオンメニューを実装しているのですが、1つのアコーディオンを押すと他のアコーディオンが閉まる様設定したいです。
- 現在の記述では2段目のアコーディオンを押すと1段目も閉じてしまい、結果的に2段目も見えなくなってしまう状況です。
- 2段目だけを機能させることは可能でしょうか?
- みんなの回答 (2)
- 専門家の回答
関連するQ&A
- jQueryのアコーディオンがIE6でちゃんと動いてくれない
jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると2階層目だけが開いてくれません。><MacのSafariなどではちゃんと動いています。 【構造】 (例:HTML) <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー <同上のような構造> ーーーーー </ul> </div> </div> <!--side end--> (例:jquery(外部js)) $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。
- 締切済み
- HTML
- jQueryのアコーディオンメニューについて
下記デモページを参考に同じアコーディオンのメニューを設置したのですが、 デモ http://www.queness.com/resources/html/accordion/index.html 上記サイトのクリックするバーを下記参考サイトの「カテゴリで探す」箇所のように 再度クリックして閉じるようにしたいです。 http://ccm.stylestore.allabout.co.jp/mojo?language=ja 下記スクリプトのどの部分をいじればいいのか、 どなたかお分かりの方がございましたらご教授頂けませんでしょうか。 ■javascript $(document).ready(function () { $('#accordion li').click(function () { //slideup or hide all the Submenu $('#accordion li').children('ul').slideUp('fast'); //remove all the "Over" class, so that the arrow reset to default $('#accordion li > a').each(function () { if ($(this).attr('rel')!='') { $(this).removeClass($(this).attr('rel') + 'Over'); } }); //show the selected submenu $(this).children('ul').slideDown('fast'); //add "Over" class, so that the arrow pointing down $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over'); }); }); 宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryアコーディオンの検索について
jQueryで作成した、アコーディオンの閉じている部分の検索について 色々と検索しましたが、解決できず悩んでいます。 jQueryでアコーディオンを作成しています。 【やりたいこと】 IEで cntrl+fでページ内検索した時 1、閉じている箇所の内容も検索する。 2、検索がヒットした場合アコーディオンを開く。 という動きをさせたい。 【知りたいこと】 IEで可能かどうか。 IEの検索で不可の場合 自作の検索フォームを作成すれば、 アコーディオンを開けるか?又その方法。 【疑問点】 IEで検索をすると 検索でヒットした場合文字色と背景色が変わりますが、 html上はその箇所が なんらか変化があったと認識されないのでしょうか? 最初は、検索が該当したら、javascriptとのイベント(onfocus?)でアコーディオンを開くというような動きができると考えましたが、 動きませんでした。 検索結果の含まれるタグを操作するという動きはできないのでしょうか。。。 もし何かご存じの方がいらっしゃいましたら、教えて頂けないでしょうか。 よろしくお願い致します。 <!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> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.accordion').click(function() { $(this).next().slideToggle(); }).next().hide(); }); </script> <style type="text/css"> .accordion_head {cursor:pointer;} </style> </head> <body> <div> <h3 class="accordion">アコーディオンのトリガー部分1</h3> <p>アコーディオンする部分1。</p> </div> <div> <h3 class="accordion">アコーディオンのトリガー部分2</h3> <p>アコーディオンする部分2。</p> </div> <div> <h3 class="accordion">アコーディオンのトリガー部分3</h3> <p>アコーディオンする部分3。</p> </div> </body> </html>
- 締切済み
- JavaScript
- アコーディオンjquery
ロリポップのサーバーにアコーディオンjqueryをおいています。 以下のように設置すると、項目をクリックしたときに 下に展開されるのですが chromeだと、左に余白ができてしまいます。 ie9だと、変に余白ができて、テキストがおかしな挙動します。。。 なぜでしょうか? --------------- <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <script type="text/javascript" src="../jq01/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { $("dd").hide(); $("dt").click(function() { $(this).toggleClass("bg2"); $(this).next().slideToggle(); }); }); </script> </head> <body> <dt class="bg1">ああああああああああああああああああああああああああああ</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd> <dt class="bg1">うううううううううううううううううううううううううう</dt> <dd>えええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ</dd> <dt class="bg1">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dt> <dd>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd> </body> </html>
- 締切済み
- JavaScript
- jQueryのドロップダウンメニューについて
jQueryを勉強しながらいろいろと実装してみているのですが、わからないことが出てきたので質問させていただきます。 今、ドロップダウンメニューを付けていて、とりあえず形にはなり、動作もしています。 ただ、ナビにカーソルかざしたときにペロンっと出てくるのはいいのですが、何度もカーソルをかざすと、その後かざした分だけ勝手にペロンペロンしてしまいます。 かざした時だけ現れるようにするには、どうすればいいのでしょうか? 現状のjavascriptの部分は以下のように記述しています。 $(document).ready(function () { $('#nav li').hover( function () { $('ul', this).slideDown(500); }, function () { $('ul', this).slideUp(500); } ); });
- ベストアンサー
- JavaScript
- アコーディオンメニューをアンカーリンクで開く
アコーディオンメニューで困っています。 色々と調べているのですが、どうもうまく動きません。 ■やりたい事 アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。 ■現状 ・アンカーリンク(A.html)-------------------- <a href="B.html#アンカー名">リンク</a> ・アコーディオン設置先(B.html)------------------ <div class="aaa" id="アンカー名"> <p class="title"> アコーディオンタイトル </p> <p class="bbb"> アコーディオンの内容表示 </p> </div> ・js--------------------------------------- $(document).ready(function(){ $(".bbb").hide(); $(".title").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $(location.hash).next(".bbb").slideToggle("slow"); }); }); 現状はこのような状態なのですが、アンカーでの動作をしてくれません。 分かる方いらっしゃいましたら、是非教えてください
- ベストアンサー
- JavaScript
- Jqueryでのアコーディオン について
Jqueryでのアコーディオンのリンク について教えていただければ幸いです。 下記のアコーディオンを メニュー1をクリックするとリンク先に飛び さらに、アコーディオンが開くようにしたくて下記のアコーディオンを 作りましたが、 そのように、機能しませんでした。 全ての<a> タグにリンクを設定してみました。 ですが、 「サブメニュー」のリンクは機能するのですが 「メニュー1」等のリンクは機能しませんでした。 具体的には、リンク先に飛ばないまま、 アコーデイォンが開いてしまいます。 どうすれば、サンプル.html (dtタグ部分)をクリックするとリンク先に飛び さらに、アコーディオンが開くようになるのでしょうか? もし、ご存じの方がいましたら力を貸していただければ幸いです。 よろしくお願いします。 $(function() { $('#accordion dd').hide(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); }); <dl id="accordion"> <dt><a href="サンプル.html">メニュー1</a></dt> <dd> <a href="#">サブメニュー1-1.html</a> <a href="#">サブメニュー1-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー2-1.html</a> <a href="#">サブメニュー2-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー3-1.html</a> <a href="#">サブメニュー3-2.html</a> </dd> </dl>
- 締切済み
- JavaScript
- 特定のページの特定部分が閉じないアコーディオン
jqueryを使用して以下の処理をしようと思っています。 リンク先に飛んだ際、リンク先のurl又はタイトル名部分のアコーディオンは、閉じていず他の部分が閉じているようにしたい。 問題点は、url名または、タイトル名の取得の仕方が不明な点です。 力を貸していただけたら幸いです。 $(function() { var i; i=1; if (url==該当のurl)←問題点、ここにurlを取得した変数を入れたいのですがどうやって取得するのか不明です。 { i=2; $('#accordion dd').hide().eq(i).show(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); } else if (url2=url2) { i=3; $('#accordion dd').hide().eq(i).show(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); } });
- 締切済み
- JavaScript
- jQueryの $(function(){ });
jQueryについて基本的な質問をさせてください。 基本的にjQueryは、お約束として $(document).ready(function(){ }); と記述し、その中に実行処理を書いていくと思うのですが loadを待たずに実行させたい時は $(document).ready(function(){ });は記述しなくてもよいのでしょうか? どの本をみてもjQueryのお約束事みたいに $(document).ready(function(){ }); を必ず書くと載っています。 自分でやってみたところ、記述しないでも問題なく動いているのですが、 やっぱり $(document).ready(function(){ }); を記述しないと、何か問題があるのでしょうか? ご存知の方、教えてください。 どうぞ宜しくお願いたします。
- ベストアンサー
- JavaScript
- アコーディオンメニューをブラウザー幅で変更したい
下記のようにHTMLを組んでjQueryを使ってアコーディオンメニューを作りました。 <dl id="List"> <dt>タイトル</dt> <dd>詳細テキスト</dd> <dt>タイトル</dt> <dd>詳細テキスト</dd> <dt>タイトル</dt> <dd>詳細テキスト</dd> </dl> jQueryは下記の通りで検索して見つけたものを使わせていただきました。 jqueryのバージョンは「1.10.1」。 $(function(){ $('#List dd').hide(); $('#List dt').click(function() { if($(this).next('dd').is(':visible')) { $(this).next('dd').slideUp(300); } else { $(this).next('dd').slideDown(300).siblings('dd').slideUp(300); } }); }); これでdtのタイトルをクリックするとdd部分が表示され、 別のdt部分をクリックすれば、先に開いていたdd部分が隠れて、 クリックしたdtの下部にあるdd部分を表示するというように 問題なく機能してくれました。 これを活かしつつ、レスポンシブのようにしたいなと思ったのです。 仕様としては、パソコンで見る時はdd部分を隠さず表示して、 ブラウザー幅が480pxに以下になったら、 dd部分を隠してアコーディオンとして機能させたい、 と思いました。 プログラムは初心者ゆえ、ライブラリの応用しかできず、 検索で見つけ出したのが下記のようなソースです。 $(function() { var w = $(window).width(); var x = 480; if (w <= x) { } }); これに上のアコーディオン用のソースを合体させればいけるのではないか? と漠然と思って(確証がもてるはずもなく…)下記のようにしてみました。 $(function() { var w = $(window).width(); var x = 480; if (w <= x) { $('#kuchikomiList dd').hide(); $('#kuchikomiList dt').click(function() { if($(this).next('dd').is(':visible')) { $(this).next('dd').slideUp(300); } else { $(this).next('dd').slideDown(300).siblings('dd').slideUp(300); } }); } }); 動いてくれそうな気がしたのですが、 全く動いてくれませんでした(涙) この情報だけを見て、 間違っている箇所がお分かりになる方がいらっしゃいましたら、 ぜひともご教授いただきたいのですが… よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます!! 質問の仕方にも問題があったかとは思いますが御丁寧にお答え頂き、 大変助かりました! まだ実践はしておりませんが、なんとかやっていきます。 ご回答ありがとうございました。 今後もよろしくお願いします!