ul liでアコーディオンパネルを作成する方法
- ul liでアコーディオンパネルを作成する方法について紹介します。多くのサンプルがdlやddで作られている中、ul liで作る方法についての情報は少ないですが、以下のJQueryのコーディング例を参考にしてください。
- アコーディオンパネルをul liで作成する方法についてのJQueryのコーディング例を紹介します。ul liでアコーディオンパネルを作るためには、JQueryのtoggleやslideToggleメソッドを使用します。以下のコードを参考にしてください。
- ul liでアコーディオンパネルを作成する方法についてのJQueryのコーディング例を紹介します。ul liをクリックした時に、その下のulが表示・非表示になるようになっています。以下のコードを参考にしてください。
- ベストアンサー
アコーディオンパネルの作成
<ul class="level1"> <li>menufirst <ul class="level2"> <li><a href="">menu 1-1</a></li> <li><a href="">menu 1-2</a></li> <li><a href="">menu 1-3</a></li> </ul> </li> <li>menusecond <ul class="level2"> <li><a href="">menu 1-1</a></li> <li><a href="">menu 1-2</a></li> <li><a href="">menu 1-3</a></li> </ul> </li> <li>menuthird <ul class="level2"> <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> </ul> このHTMLにアコーディオンパネルを追加したいのですが、 多くのサンプルがdlやddで作ったものばかりでこれをul liで作ろうとすると 上手く作動しません。 何か良いJQueryのコーディング例があればご教授お願いいたします。
- majunian
- お礼率54% (6/11)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞多くのサンプルがdlやddで作ったものばかりでこれをul liで作ろうとすると ＞上手く作動しません。 基本的にはほぼ同様の手順でできると思いますが… 検索してみたら、ほぼ同じ構成のメニューについての解説サイトがありました。 （内容は良く見てません） http://triplexxx.jp/archives/150 ほかにも、↓の3番目のサンプル（下の段）も同様の構成みたいですが… （こちらは、ホバーで動作するタイプですが） http://jquery.bassistance.de/accordion/demo/?p=1.1.1
関連するQ&A
- 【JQuery】アコーディオンの入れ子について
アコーディオンの入れ子（多階層）について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。 入れ子の数は計3つを予定してます。（第3階層まで） 1～3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。（メニューを増やす度にIDが増えるのを止めたい） ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか？ （ID、CLASSのセレクタの振り方は上記以外でもかまいません） また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか？ （上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません） JavaScriptがよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。
- 締切済み
- JavaScript
- アコーディオンパネルで複数のリンクを展開する方法
こんばんわ。Jquery超初心者です。 Jqueryでアコーディオンパネルを実装しようとしているのですが、Jqueryの指定に問題があるようで、 開きません。以下コードです。 (HTML) <ul class="slide"> <li><a href="">窓口業務</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></li> </ul> </li> <li><a href="">異動業務</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="">検針業務</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> </ul> </li> <li><a href="">調定業務</a> <ul> <li><a href="">menu 4-1</a></li> <li><a href="">menu 4-2</a></li> <li><a href="">menu 4-3</a></li> </ul> </li> </ul> (JQuery) $(function () { $("ul.slide li ul").hide(); $("ul.slide li").click(function () { $("ul.slide li").each(function () { if ($("ul.slide li").css("display")=="none"){ $("ul.slide li ul"). slideDown(); } else { $("ul.slide li ul").slideUp(); } }); }); }); eachの使い方が間違っているのか、はたまた何か足りない記述があるのか、途方に暮れています。 何かお気づきの方、ご指摘の程宜しくお願い致します。
- ベストアンサー
- 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
- アコーディオンメニューの開閉制御
私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
- 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 アコーディオンメニューについて
とあるサイトを参考にアコーディオンメニューを作成しています。 おおよその動作はうまくいっているのですが、1点どうしても実装できません。 例えば、menu2.htmlへ遷移した場合は、<ul class="menu2">内のメニューは 閉じることなく開いたままにしておきたいのです。他のページへ遷移した場合も同様です。 該当ページへ遷移した時に該当メニューのクラス名を変えること(open→block)で読み込み時は開いたままになるようになりましたが、他のメニューをクリックすると該当ページメニューも閉じてしまいます。 メニュー部分を開いたまま保てる方法をどなたかご教授いただけませんでしょうか。 何卒よろしくお願いいたします。 --------------------------------------- html <ul class="acc"> <li> <h3 class="h3_menu1 open"><a href="#">Menu1</a></h3> <ul class="menu1"> <li class="menu1_1"><a href="menu1_1.html">Menu1_1</a></li> <li class="menu1_1"><a href="menu1_2.html">Menu1_2</a></li> <li class="menu1_1"><a href="menu1_3.html">Menu1_3</a></li> <li class="menu1_1"><a href="menu1_4.html">Menu1_4</a></li> <li class="menu1_1"><a href="menu1_5.html">Menu1_5</a></li> </ul> </li> <li> <h3 class="h3_menu2 block"><a href="#">Menu2</a></h3> <ul class="menu2"> <li class="menu2_1"><a href="menu2.html#Menu3_1">Menu2_1</a></li> <li class="menu2_2"><a href="menu2.html#Menu3_2">Menu2_2</a></li> <li class="menu2_3"><a href="menu2.html#Menu3_3">Menu2_3</a></li> <li class="menu2_4"><a href="menu2.html#Menu3_4">Menu2_4</a></li> <li class="menu2_5"><a href="menu2.html#Menu3_5">Menu2_5</a></li> </ul> </li> <li> <h3 class="h3_menu3 open"><a href="#">Menu3</a></h3> <ul class="menu3"> <li class="menu3_1"><a href="menu3.html#Menu3_1">Menu3_1</a></li> <li class="menu3_2"><a href="menu3.html#Menu3_2">Menu3_2</a></li> <li class="menu3_3"><a href="menu3.html#Menu3_3">Menu3_3</a></li> <li class="menu3_4"><a href="menu3.html#Menu3_4">Menu3_4</a></li> </ul> </li> </ul> jQuery var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("h3.open", this).each(function(index){ var $this = $j(this); if(index > 0) { $j("h3.open").next().hide(); } else { $j(".menu1").hide(); } $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params,{complete: function(){$j("h3.block").css("display","block");}}); return false; }); }); }); });
- ベストアンサー
- JavaScript
- jQueryのアコーディオンメニュー 開閉の制御
jQueryのアコーディオンメニュー 開閉の制御 こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして （http://triplexxx.jp/archives/150） アコーディオンメニューを設置しました。 ページ遷移後でも、常に一番目のメニューが開いている状態なので、 選択しているページのメニューだけを開いている状態にしたいのですが どの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが 新しいコードを書ける知識がないので、教えてください。 よろしくお願いします。 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> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- 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); }); }); }); }); ----------------------
- ベストアンサー
- AJAX
- jQueryで２段式アコーディオンメニュー
いつも参考にさせて頂いております。 あるサイト様（http://triplexxx.jp/archives/150）を参考にjQueryで２段式のアコーディオンメニューを作成していましたが、何分初心者なもので早々に行き詰まってしまいました。 理想はこちらのサイト様（http://html-five.jp/pc/demo/002/）にあるデモの下側、『２段アコーディオン』をこちら（http://html-five.jp/demo/002/index2.html）の『ポンプ型アコーディオン』ような動きにしたいと思っております。 スクリプト自体を入れ子にしたりしてみましたが根本的な部分がダメなようでうまくいきませんでした。 何卒ご教授いただけますようお願いします。 [参考にしたjQuery（１段までは問題なく動きます）] script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".ac_parent").each(function(){ j$("li > a").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> [作成中のHTML] <div> <ul class="ac_parent"> <li><a href="#">1</a> <ul class="ac_child"> <li><a href="#">11</a></li> <ul class="ac_gchild"> <li><a href="#">111</a></li> <li><a href="#">112</a></li> <li><a href="#">113</a></li> </ul> <li><a href="#">12</a></li> <ul class="ac_gchild"> <li><a href="#">121</a></li> <li><a href="#">122</a></li> <li><a href="#">123</a></li> </ul> </ul> </li> <li><a href="#">2</a> <ul class="ac_child"> <li><a href="#">21</a></li> <ul class="ac_gchild"> <li><a href="#">211</a></li> <li><a href="#">212</a></li> <li><a href="#">213</a></li> </ul> <li><a href="#">22</a></li> <ul class="ac_gchild"> <li><a href="#">221</a></li> <li><a href="#">222</a></li> <li><a href="#">223</a></li> </ul> </ul> </li> <li><a href="#">3</a> <ul class="ac_child"> <li><a href="#">31</a></li> <ul class="ac_gchild"> <li><a href="#">311</a></li> <li><a href="#">312</a></li> <li><a href="#">313</a></li> </ul> <li><a href="#">32</a></li> <ul class="ac_gchild"> <li><a href="#">321</a></li> <li><a href="#">322</a></li> <li><a href="#">323</a></li> </ul> </ul> </li> </ul> </div>
- ベストアンサー
- JavaScript
- jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- アコーディオン（jquery）クリック後他閉じたい
プログラム初心者のものです。 jQueryを利用したアコーディオンメニューを作成したのですが、現在、クリック後開き、他をクリック後もクリック済みの箇所が開いた状態になっています。 ＜改善＞ クリックしたメニューのみ表示させたいのですが お手数おかけいたします、ご教示いただけますでしょうか。 下記にソースを掲載してみます。 【javascript】 $(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); }); 【HTML】 <div id="nav"> <span class="btn1"><a href="#">A</a></span> <ul> <li class="t1"><a href="#">A-1</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-2</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-3</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> </ul> </div> ご教授の程よろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
ありがとうございました。 何とか実現できました。