締切済み

【JQuery】アコーディオンの入れ子について

2012/01/06 01:02

fujillinの回答

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

2012/01/06 10:44 回答No.1

普通に考えれば必要なidはトップのnaviだけですむのではないでしょうか？ナビゲーション関連は皆が考えているので、ちょっとでも探す気があればゴマンと見つかると思いますが？以下、ごく一例（内容は見ていませんが）＜ＣＳＳ関連＞ http://www.red-team-design.com/css3-dropdown-menu http://www.cssplay.co.uk/menus/skeleton2.html ＜javascript関連＞ http://onehackoranother.com/projects/jquery/droppy/ http://codepress.ru/jquery/amenu/ http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/ http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/

この回答がついた質問に戻る

回答全件

こんにちは。可能不可能かに対する回答は実現可能という答えです。 …

- LancerVII
2012/01/06 17:02

関連するQ&A

アコーディオン（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
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多層式アコーディオンメニューについて。
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 アコーディオンメニューについて
とあるサイトを参考にアコーディオンメニューを作成しています。おおよその動作はうまくいっているのですが、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で記事を６列表示にしたいのです。
ｊQueryで記事を６列表示にしたいのです。 jQueryで６列表示をしたいと思って試行錯誤をしていたのですが、全くわからずじまいで、どうしたらいいのかと知恵袋に投稿致しました。各カテゴリごとに表示をするようになっているのですが、オールだけ全て表示になります。５つ残して表示させればいいのですが、各カテゴリが消えてしまうので、どうしてもオールは６行表示させたいと思っています。どなたか助けていただけませんでしょうか？ jQuery ---------------------------------------------- $(document).ready(function() { $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else { $(this).fadeIn('slow').removeClass('hidden'); } }); } return false; }); }); HTML ---------------------------------------------- <ul id="navi"> <li class="all"><a href="#">All</a></li> <li><a href="#">CMS</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> <ul id="portfolio"> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">prototype</a></li> <li class="css"><a href="#">CSSビギナー</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">plugin</a></li> </ul>
- 締切済み
- JavaScript
アコーディオンパネルの作成
<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のコーディング例があればご教授お願いいたします。
- ベストアンサー
- JavaScript
jQueryのアコーディオンがIE6でちゃんと動いてくれない
jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜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>  （例：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
cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい
cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a> 　　　　<ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS（親リストの指定） ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。入れ子のulには、subとつけて、試行錯誤しているのですが、どうしても背景画像が反映してしまって・・・。ご教示ください。よろしくお願いします。
- 締切済み
- HTML

【JQuery】アコーディオンの入れ子について

fujillinの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

【JQuery】アコーディオンの入れ子について

fujillinの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

カテゴリ
一覧

専門家に質問してみよう
専門家登録