締切済み

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

2010/11/23 09:57

jqueryのアコーディオンメニューを利用してるのですが、項目を３つから２つに減らすためliタグを削除したのですが、その部分が空欄となり、思うようにいきません。３つあって２つが繰り上がり下がブランクのメニューがあります。 elemnt.styleという箇所でheightが６７ピクセルに設定されているようですが、発見できず、困っております。もしよろしければ教えて頂けると助かります。

kotikaze6
お礼率47% (46/96)

JavaScript
回答数1
ありがとう数0

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

みんなの回答

yyr446
ベストアンサー率65% (870/1330)

2010/11/24 16:52 回答No.1

その部分のhtmlとあなたの書いたjavascriptコードを載せれば、回答できるかも知れません。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

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のアコーディオンメニュー　開閉の制御
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を使ったアコーディオンメニュー
現在、色々なサイトを見ながら、jQueryを使用したアコーディオンメニューを作成しています。(かなりの初心者です。) リンク先をクリックして、ページが移動した際に、メニューの開いた状態が保持されるようにしたいのですが、どうすれば良いのかわからず困っています。 //////////////////////////////////////////////// <script type="text/javascript">  </script> html部分 <ul> <li>ABC <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li>... </ul> //////////////////////////////////////////////// ↑このような感じで表記しています。どなたかお詳しい方、ご教示よろしくお願いします。
- 締切済み
- JavaScript
jqueryによるアコーディオン表示
http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。上記サイトのデモではアコーディオンメニューをクリックするとその下に「アコーディオンメニューが開く」という文字列が表示されます。しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。【表示イメージ】アコーディオンメニュー１　　　　アコーディオンメニューアコーディオンメニュー２　　　　アコーディオンメニューアコーディオンメニュー３　　　　アコーディオンメニュー下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのようにアコーディオンメニューが表示されますでしょうか。また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。 line-height　を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。【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 アコーディオンメニューについて
とあるサイトを参考にアコーディオンメニューを作成しています。おおよその動作はうまくいっているのですが、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の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>
- ベストアンサー
- JavaScript
jQueryアコーディオンで複数メニューを開きたい
jQueryで開閉式（アコーディオン）の縦メニューを作りました。 http://www1.m.jcnnet.jp/minato01/demo/j-menu/ このメニューで、以下の２点の仕様を追加希望です。１.　「メニュー１」「メニュー２」を最初から開いた状態で表示したい２.できれば、ページ移動した場合、前の開いた内容を記憶させたい（cookieでOK）特に「１」は必須事項です。色々検索してみましたが、方法が色々あってもすべて満たす方法が見つかりません。ソースは以下の通りです。 -------------------- html -------------------- <span>メニュー 1</span> <ul> <li><a href="#">メニュー 1-1</a></li> <li><a href="#">メニュー 1-2</a></li> <li><a href="#">メニュー 1-3</a></li> </ul> <span>メニュー 2</span> <ul> <li><a href="#">メニュー 2-1</a></li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> <span>メニュー 3</span> <ul> <li><a href="#">メニュー 3-1</a></li> <li><a href="#">メニュー 3-2</a></li> <li><a href="#">メニュー 3-3</a></li> </ul> <span>メニュー 4</span> <ul> <li><a href="#">メニュー 4-1</a></li> <li><a href="#">メニュー 4-2</a></li> <li><a href="#">メニュー 4-3</a></li> </ul> -------------------- css -------------------- ul, li { text-indent: 0; list-style: none; } ul { display: none; } ul.selected { display: block; } span { margin-bottom:1px; padding: 8px 4px; display: block; cursor: pointer; border:1px solid #ccc; } span:before { padding: 0 8px 0 0; vertical-align: middle; content: url("img/bullet_arrow_right.png"); } span.selected:before { content: url("img/bullet_arrow_down.png"); } span:hover,li:hover { background: #f3f3f3; } -------------------- js -------------------- $(function() { $('<img>').attr('src', 'img/bullet_arrow_down.png'); $('span').click(function() { $(this).next('ul').slideToggle('fast'); $(this).toggleClass('selected'); }); }); ※jQueryは「jquery-1.9.0.min.js」を読み込んでいます。 -------------------- 参考サイトは以下のサイトです。 http://php.o0o0.jp/article/4138817358715040 分かる方、ぜひ具体的にどこをどう修正したらよいか詳しく教えていただければ幸いです。どうぞよろしくお願いいたします。
- 締切済み
- 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多層式アコーディオンメニューについて。
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でのアコーディオンのリンクについて教えていただければ幸いです。下記のアコーディオンをメニュー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のアコーディオンメニューについて

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

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

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

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

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

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

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

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