• 締切済み

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>

みんなの回答

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.2

最初に回答したとおり、ページ遷移するので、遷移先に同じアコーディオンメニューがあった際は、(なんらかの形で保持しないと)開閉状態がリセットされます。 まずですね、アコーディオンとリンクが同じボタンで併用されるのはちょっとおかしい気がします。 アコーディオンの開閉ボタンなら開閉ボタンとして、リンクならばリンクとして機能を分けるべきです。 また、アコーディオンの開閉をどうすべきか、という細かい動きはどうなりますか? 例えばメニューがABCあって、ページ遷移してもそれぞれのメニューの開閉状態を保っていたい、とか、ページAのときはメニューAのみを開いておきたい、とか。 閉じる時はどういう動きをするのか、とか。 ページの初期状態が該当のメニューが開いた状態で他は閉じた状態にしたいのならば、各ページのURLの違いをswitch文なりif文なりで分ければよいです。 もし併用したいのなら、アコーディオンが開ききったら遷移するという制御も可能です。

seiza2014
質問者

お礼

前回に引き続き為になる回答をしていただきありがとうございます。jqueriy初心者のため、不安の中、回答者様の回答が凄く心強いです。

seiza2014
質問者

補足

<dl id="accordion"> <dt><a href="サンプル.html">メニュー1</a></dt> <dd> <a href="#">サブメニュー1-1.html>サブメニュー1-1</a> <a href="#">サブメニュー1-2.html>サブメニュー1-2</a> </dd> <dt><<a href="サンプル.html2">メニュー2</dt> <dd> <a href="#">サブメニュー2-1.html>サブメニュー2-1</a> <a href="#">サブメニュー2-2.html>サブメニュー2-2</a> </dd> <dt><<a href="サンプル.html3">メニュー3</dt> <dd> <a href="#">サブメニュー3-1.html</a> <a href="#">サブメニュー3-2.html</a> </dd> </dl> ONEONE様、回答ありがとうございます。 ご指摘のありました 細かい動きを上記のアコーディオンを例にとり説明させていただきます。 メニュー1をクリックする「サンプル.html」のページに飛ぶ リンク先の「サンプル.html」の下位に属している「サブメニュー1」「サブメニュー2」のみが プルダウンで表示され、これは、開いたままで閉じる必要はありません。 図で表すと↓のような感じです。 メニュー1  サブメニュー1-1  サブメニュー1-2 メニュー2 メニュー3 「サブメニュー1」をクリックすると「サブメニュー1-1.html」のページに飛び ここでも先ほどの状態(上記の図の状態)が維持される感じです。 そして、メニュー2をクリックするとリンク先「サンプル.html2」に飛び下記の状態になる。こんな機能を付けたいと望んでいます。 こういう機能が出来るなら特にアコーディオンである必要はありません。 力を貸していただければ幸いです。 よろしくお願いします。 メニュー1 メニュー2  サブメニュー2-1  サブメニュー2-2 メニュー3

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

return falseを取ればいいと思うんだけど、同じ画面内だと遷移しちゃうよのでアコーディオンにする意味がないです。 それともインナーフレームを使うんでしょうか?

seiza2014
質問者

お礼

お礼をするのが遅くなり申し訳ありません。 参考になる回答をしてくださったこと感謝しています。

seiza2014
質問者

補足

返事遅くなり申し訳ありません。 回答ありがとうございます。 状況としてはドリームウェバーのテンプレート機能を使用した サイドバーにこの機能を搭載しようとしています。 提案されたように、return falseを取ってみました。 結果下記の様になりました。 リンク先に移動するが アコーディオンが開かない 再度クリックしても同様。 下記の改善策を考えてみましたがどうでしょうか? if文を使用して、もし リンク先のURLに飛んでいたら アコーディオンが機能する。 そうでないなら、リンク先に飛ぶとかと できるのでしょうか? もし、よろしければお知恵を貸していただければ幸いです。

関連するQ&A

  • jQueryでアコーディオンメニュー

    jQueryのaccordionでメニューを作っています。 初期のページは大項目1~3がアコーディオンで開閉し、 開いた中にある小項目がリンクボタンになっています。 【HTML 1】 小項目1(index_01.html)では、大項目1が開いたままになり、 大項目2、3のみアコーディオンで開閉します。【HTML 2】 ここからがご教示頂きたいところで、 小項目2(index_02.html)を表示している時は 大項目2が開いたままで、大項目1、3をアコーディオンさせたいと考えております。 【HTML 3】 アコーディオンではさむ形になるので、新しいid「slider2」を作りましたが、 お互いが開いたままの状態になってしまうのが難点です。 解決案として、「slider」で大枠を囲み、アコーディオンに左右されないddを作るか、 「slider」と「slider2」を同期させてどちらか片方が開いている時は片方が閉じるように する・・・と考えています。 ★印の部分のfor文に手を加えるのではないかと思うのですが、 どうにもお手上げです・・・ お手すきの方、どうかお力添え下さい よろしくお願い致します。 //______jQuery______// var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; ★for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onmouseover=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); //______HTML 1______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 2______// <div id="accordion"> <dl class="accordion"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dl class="accordion" id="slider"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 3______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> </dl> <dl class="accordion"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dl class="accordion" id="slider2"> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> <script type="text/javascript"> var slider1=new accordion.slider("slider1"); slider1.init("slider"); var slider2=new accordion.slider("slider2"); slider2.init("slider2"); </script>

  • jqueryによるアコーディオン表示

    http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。 上記サイトのデモではアコーディオンメニューをクリックするとその下に 「アコーディオンメニューが開く」という文字列が表示されます。 しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。 【表示イメージ】 アコーディオンメニュー1     アコーディオンメニュー アコーディオンメニュー2     アコーディオンメニュー アコーディオンメニュー3     アコーディオンメニュー 下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように アコーディオンメニューが表示されますでしょうか。 また、下記サンプルではアコーディオンメニュー1が開いたときに表示する文字列を 改行しているのですが<BR>タグで開業すると1行目と2行目の間が大きく開いてしまいます。 line-height を調整すれば行間の隙間が調整できるのですが1行目の位置まで変更 されてしまいます。1行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。 【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
  • jQueryでアコーディオンメニュー

    質問させてください。 jQueryを使用してアコーディオンメニューを作成しているですが、上手くいきません。 ソースは以下のように記載しました。 (jQuery) <script type="text/javascript"> $(function(){ $("dd:not(:first)").css("display", "none"); $("dl dt").click(function(){ if($("+dd", this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd", this).slideDown("slow"); } }); }); </script> (HTML) <dl> <dt>Step.1.</dt> <dd><p>aaaaa</p></dd> <dt>Step.2.</dt> <dd><p>bbbbb</p></dd> <dt>Step.3.</dt> <dd><p>ccccc</p></dd> </dl> 上記の場合、if()の中の$("+dd", this).css("display")がundefinedになるためチェックが正常に行われません。 どのように修正すればよいのでしょうか。 お手数ですがお知恵をお貸しください。お願いします。

  • 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が使えればと思っています。 複数の質問になりましたが、どうぞよろしくお願いいたします。

  • アコーディオンメニューの開閉制御

    私webデザイナーをしています。 アコーディオンメニューで(開くのは1つのパネルのみ)ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。 しかし、下記のコードでどうしても実装できません。 技術のある方、間違いを教えていただけないでしょうか? 【html】 <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:"/"}); } }); よろしくお願いいたします。

  • アコーディオンメニューについて

    jQueryを使ったアコーディオンメニューを作成しているのですが、 <dt>をクリックすると<dd>部分に外部のテキストファイルを表示させる方法がわかりません。 以下の記述に何を付け足せば良いのですか? $(function(){ $("dd:not(:first)").css("display","none") $("dt:first").addClass("selected"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); $("dt").removeClass("selected"); $(this).addClass("selected"); } }).mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }) }) <dl> <dt>Step.1</dt> <dd><p>Lorem ...(中略)... venenatis.</p></dd> <dt>Step.2</dt> <dd><p>Integer ...(中略)... accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer ...(中略)... imperdiet. </p></dd> </dl>

  • アコーディオン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>

  • アコーディオンメニューをブラウザー幅で変更したい

    下記のように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); } }); } }); 動いてくれそうな気がしたのですが、 全く動いてくれませんでした(涙) この情報だけを見て、 間違っている箇所がお分かりになる方がいらっしゃいましたら、 ぜひともご教授いただきたいのですが… よろしくお願いいたします。

  • jQueryにてアコーディオン機能実装について

    皆様、いつもお世話になります。 現在jQueryを使ったアコーディオン機能の実装を勉強しています。 下記、サイトを参考に実装してみたのですが、要望どおりの挙動にならず困っています。 【参考サイト】 http://web-pc.net/jquery010 【質問内容】 ページロード時に、全てのリストが開いてしまっている。 要望する挙動は以下ページのとおり、ページロード時は全てのリストが閉まっている状態にしたい。 http://sample.web-pc.net/accordion/# ソースは以下のとおりです。 【javascript】 <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(".schedule_list dt").click(function(){ $(this).next("dd").slideToggle(); $(this).children("div").toggleClass("open"); }); }); </script> 【HTML】 <div> <dl class="schedule_list"> <dt> <div> <span> <span>★</span> <span>▲▲</span> <span>画像</span> </span> </div> </dt> <dd> <div> <table> <tr> <td> <img src="▲"> </td>    <td> <div> <a href=""><img src="▲" /></a> </div>          </td> </tr> </table> </div> </dd> </dl> </div> 【CSS】 dl.schedule_list { display:block; } dl.schedule_list dt div { width:546px; height:61px; display:block; background-image:url(★);} dl.schedule_list dt div.open { width:546px; height:61px; display:block; background-image:url(★);} 以上です。 どなたかお詳しい方ご教授のほどよろしくお願いいたします。 開発環境: MacOSX yosemite Dreamweaver CC Safari8.0

  • jQueryのmouseoutについての質問です。

    jQueryの質問です。 dtにマウスを合わせた時にddが表示し、dlの領域以外にマウスが外れるとdd が非表示させるような設定をしたいのですがうまくいきません。 子要素のddとかdtとかaに合わさるとすぐに非表示になってしまいます。 dl内は、どこを移動しても非表示にならずdl要素以外の箇所にマウスが合わ さった時に非表示になってほしいのですが どなたかアドバイスいただけないでしょうか? 自分なりにはこのように記述してみました。 ■jQueryの記述 $(function(){ $("dt").mouseover(function(){ $("dd:not(:animated)").slideDown("slow"); }); $("dl").mouseout(function(){ $("dd:not(:animated)").slideUp("slow"); }); }); ■CSSの記述 <dl> <dt>スライドして表示状態を切り替える</dt> <dd> あああ<a href="#">ああああ</a>あああああああ ああああああああああああああああああああああああああああああああああ あああああああああああああ<a href="#">ああああ</a>あああああ<a href="#">ああ</a>あああああ </dd> </dl> デモURL: http://tegarude.web.fc2.com/faq/test.html