アコーディオンメニューの最初に開く場所について

2023/10/21 00:29

このQ&Aのポイント

アコーディオンメニューの最初に開く場所の変更方法について教えてください。
こちらのサイトで紹介されているアコーディオンメニューを使用していますが、アクセス時に自動で開く場所を変更したいです。
現在は指定された設定で最初のコンテンツが開いていますが、別の場所を最初に開くように設定したいです。

ベストアンサー

アコーディオンメニューの最初に開く場所について

2011/03/31 16:12

こちらのサイト http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-simple-accordion.html で紹介されているアコーディオンメニューを使用しているのですがアクセス時に自動で開く場所の変更を行う場合どの様に変更をしていいのかわかりません。 //Set default open/close settings $('.acc_container').hide(); //Hide/close all containers $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container おそらくこの部分ではと思うのですがどうにもうまくいきません。ご教授お願いいたします。

clemon
お礼率68% (30/44)

AJAX
回答数1
ありがとう数4

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/03/31 20:46 回答No.1

試してませんが… 英語はよくわかりませんが、ご提示のセッティング部分のコメントにあるように＞$('.acc_container').hide(); //Hide/close all containers 『class="acc_container"の要素を全て非表示にする』＞$('.acc_trigger:first').addClass('active').next().show();　＞//Add "active" class to first trigger, then show/open the immediate next container 『最初のclass="acc_triger"に"active"クラスを追加し、直後にあるコンテナ（container）を開く（表示する）』となっているのではないでしょうか？ firstの代わりに、eq(2)としてあげることで3番目（最初のindex値が0）の要素が開いたりしませんか？（確認していませんのであしからず）

質問者

お礼 2011/04/01 17:56

見事に出来ましたありがとうございます！

関連するQ&A

アコーディオンで開かれたパネルの位置にスクロール
アコーディオン作成でぶつかってしまったので質問させてください。下記サイトを参考にスマホサイトにアコーディオンを作成しました。 http://pops-web.com/main/html/demo-007.html タブをクリックしたと同時に開かれているパネルの上部にスクロールさせたいのですが、知識が貧しく苦戦しております。理想は下記のURLのような動きにしたいと思っています。 http://lab.boy.jp/demo/accordion/index.html どなたかお分かりの方がおられましたらご教授頂けないでしょうか。宜しくお願いいたします。 <h3 class="trigger">ここにタイトル</h3> <div class="content"> <div class="deta">ここに内容</div> </div> <h3 class="trigger">ここにタイトル</h3> <div class="content"> <div class="deta">ここに内容</div> </div> </div> //Accordion (function($){ $(function(){ //オブジェクトを保存 var accordionItem=$('#accordion'); //一旦全部消す accordionItem.find('.content').hide(); //active要素を指定して開く var no=0; accordionItem.find('.trigger').eq(no).addClass('active').next('.content').show(); //click-action accordionItem.find('.trigger').click(function () { //slide $(this).next('.content').slideToggle('slow') .siblings('div:visible').slideUp('slow'); //activeクラス切り替え $(this).toggleClass('active'); $(this).siblings('.trigger').not($(this)).removeClass('active'); }); //hover-toggle accordionItem.find('.trigger').hover(function () { //toggle hoveredクラス $(this).toggleClass('hovered'); return false; }); }); })(jQuery); 「//activeクラス切り替え」の下に以下の2行を追加したのですが、下の方のタブになるとスクロール位置が正しい位置にスクロールされませんでした。。 var scposi = $(".trigger.active").offset().top; $('body,html').animate({ scrollTop: scposi });
- ベストアンサー
- JavaScript
【ｊQuery】スマフォサイトのアコーディオン
スマートフォンサイトで使用するアコーディオンについて下記サイトのものを参考に制作しています。 http://07design.net/blog/?p=477 こちらのスクリプトでは、一つのコンテンツをクリックして、もう一度クリックしない限り開いたままの状態になりますが、一つのコンテンツが開かれている場合、その他のコンテンツを閉じるように動作させることは可能でしょうか？イメージ的にはこちらのサイトにあるようなものです。 http://www.geekzshu.com/jquery/975 どなたか解決策がお解かりの方がおられましたら宜しくお願いいたします。 ■html <section class="list"> <div class="acordion"> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> </div> </section> <script type="text/javascript"> $(function(){ $("#accordion").accordion({ header: "h3", collapsible:true, animated: 'bounceslide' , autoHeight:false, active:10 }); }); </script> ■javascript $(document).ready(function(){ //acordion_treeを一旦非表示に $(".acordion_tree").css("display","none"); //triggerをクリックすると以下を実行 $(".trigger").click(function(){ //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら if($("+.acordion_tree",this).css("display")=="none"){ //classにactiveを追加 $(this).addClass("active"); //直後のacordion_treeをスライドダウン $("+.acordion_tree",this).slideDown("normal"); }else{ //classからactiveを削除 $(this).removeClass("active"); //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ $("+.acordion_tree",this).slideUp("normal"); } }); });
- ベストアンサー
- JavaScript
アコーディオンメニューの開閉制御
私webデザイナーをしています。アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。しかし、下記のコードでどうしても実装できません。技術のある方、間違いを教えていただけないでしょうか？【ｈｔｍｌ】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。
- 締切済み
- 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 アコーディオンメニューについていくつか質問させていただきます。当方、はじめてjQueryを使っています。以下のページを参考にアコーディオンメニューを作成しています。 http://triplexxx.jp/archives/150 <ul class="acc"> <li><a href="1" class="open">category1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a> <ul class="fxmn"> 　　　　 <li><a href="#>menu1-3-1</a></li> <li><a href="#">menu1-3-2</a></li> <li><a href="#">menu1-3-3</a></li> </ul> </li> 　</ul> </li> <li><a href="2" class="open">category2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3" class="open">category3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul> var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index !=n) $this.next().hide(); $this.click(function(){ var params = {height:"toggle",opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); (1)：具体的にあげますと、上記のmenu1-3をクリックしてmenu1-3-1、1-3-2、1-3-3のアコーディオン　　を開き、　　1-3-1をクリックしてリンク先に飛んだ際に、直前に開いていたアコーディオンをそのままの状態　　　にしておきたいというものです。（↓こんな感じです） category1 ・　menu 1-1 ・　menu 1-2 ・　menu 1-3 ・・　menu1-3-1 ・・　menu1-3-2 ・・　menu1-3-3 category2 category3 教えて！gooの過去の質問を参考させていただきながら、 if(index !=n) $this.next().hide();　　で、　n　を指定することで、それぞれのサブメニューを開いた状態にすることには成功したのですが、その下の階層のメニューをどのように指定すればよいかがわかりません。 (2)：また、リンク先のページに飛んだ時に、アコーディオン部分は動かないのが望ましいのですが、　　可能でしょうか？　　（タブのようにページが切り替わる感じが理想的ですが、ページ数が大変多いため難しいとおもっ　　ています） (3)：(1)、(2)はページごとにscriptを書き換えるのではなく、htmlをいじることで（li タグにclass指定をす　　　るなど）変更するのは可能でしょうか？　　外部scriptが使えればと思っています。複数の質問になりましたが、どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
jQueryを利用したアコーディオンメニュー
wordpress上でjQueryを使用したアコーディオンメニューを作成しようと思います。サイトの左カラムに設置して、ボックス化されたリストの一部をクリックするとメニューの開閉、テキストリンクの部分をクリックするとカテゴリのリンクに飛ぶように作成したいと考えております。アコーディオンの開閉までは作成できたのですが、そこからカテゴリへのリンクがうまく行きません。。 javascriptがあまり詳しくないので、ぜひともお力を貸してください。よろしくお願いします。  <script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li < a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script>   <ul class="acc"> <?php wp_list_categories('hide_empty=0&title_li='); ?> </ul> 
- ベストアンサー
- JavaScript
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を使用したアコーディオンメニューを作成しています。(かなりの初心者です。) リンク先をクリックして、ページが移動した際に、メニューの開いた状態が保持されるようにしたいのですが、どうすれば良いのかわからず困っています。 //////////////////////////////////////////////// <script type="text/javascript">  </script> html部分 <ul> <li>ABC <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li>... </ul> //////////////////////////////////////////////// ↑このような感じで表記しています。どなたかお詳しい方、ご教示よろしくお願いします。
- 締切済み
- JavaScript
マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。
初めまして。 JSはプログラムを組んだことがなく、悩んでおります。一応、アコーディオンメニューは設置しておりますが、クリックで開閉するアコーディオンメニューなので、困っております。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> ～以下省略します～そしてjavascriptのソースです。 var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ j$(this).next().toggle().parent().siblings() .children("ul:visible").hide(); return false; }); }); }); }); すみませんが、よろしくお願いいたします。
- ベストアンサー
- 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