• 締切済み

アコーディオンメニューの高さの調節がわかりません

アコーディオンメニューを設置したのですか、開いた時にすべてが表示されずに下部がきれてしまします。 どこかに高さを制限しているところがあるのでしょうか? 知識が無く、いろいろ調べてみたりしたのですがわかりません。 どなたか教えていただけませんでしょうか? -------------script.js---------------- 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.onclick=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} }(); ----------------------------------------- -----------style.css-------------------------- * {margin:0; padding:0} #accordion2 {width:180px; margin:10px auto; border:0px solid #000; border-top:none} .accordion2 {width:180px; font:10px Verdana,Arial; color:#fff} .accordion2 dt {width:180px; border-top:0px solid #333} .accordion2 dt:hover {background-color:#fff} .accordion2 .open {background-color:#fff} .accordion2 dd {overflow:hidden; background:#fff} .accordion2 span {display:block; width:180px; border-top:none; padding:0px} ----------------------------------------

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答がないみたいなので… よくわかりませんが、initの時点で対象要素のoffsetHeightを取得しているようです。 スクリプトをはずした場合に正しく(全部)表示できていますか? floatなどの影響で高さが要素に反映されていないようなことがないでしょうか? あるいは、init後にddに内容を加えたりしている場合、正しくレンダリングできるはずであっても(↑)で高さを取得済みのため反映されません。

yuu0112
質問者

お礼

回答ありがとうございます。 勉強不足を痛感いたしました。 再度作り直してみます。

関連するQ&A

  • アコーディオンのフォントがIEのみ適用にならない

    以下のソースなのですが、Firefox/Operaはスタイルシート指定のメイリオ表示なのですが、 IE8で閲覧すると文字がぼやけて表示されます。どこに原因があるでしょうか? よろしくお願いいたします --- 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.onclick=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} }(); var slider1=new accordion.slider("slider1"); slider1.init("slider"); var slider2=new accordion.slider("slider2"); slider2.init("slider2",0,"open"); var slider3=new accordion.slider("slider3"); slider3.init("slider3",0,"open");

  • 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>

  • スライド開閉のjsを複数にしたい

    http://sandbox.leigeber.com/accordion/index.html 元ページはこれなんですが1番上aboutの開閉1列だけでいいんです。 これをhttp://sussiweb.com/hp/html/img/13.htmの タグ切り替えのようにボタンを押したら画像の変わりに文章が切り替わるようにしたいのです。 スペースの都合上ボタンを押したら文章が開閉しなおかつ押すボタンによって文章が変わって欲しいのです。開閉窓は1個にしたい(初期状態は閉じた状態希望) このようなことは可能でしょうか? よろしくお願いします。 http://sandbox.leigeber.com/accordion/index.html の起動jacascriptは以下のものです。 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.onclick=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} }(); これを切り替え開閉ように改造できたらと思ってます。 よろしくお願いします

  • アコーディオンのタブ開きリンクについて

    以下の通りアコーディオンを設定しました。 http://street.s51.xrea.com/test/index-.html デフォルトでは全て展開・全て閉じるのリンクがあるのですが、 1つのタブを開いた後に「次のタブを開く」のリンクを作りたいと考えています。 この場合のソースはどのようになるでしょうか? よろしくおねがいいたします --- <script type="text/javascript"> var parentAccordion=new TINY.accordion.slider("parentAccordion"); parentAccordion.init("acc","h3",0,0); var nestedAccordion=new TINY.accordion.slider("nestedAccordion"); nestedAccordion.init("nested","h3",1,-1,"acc-selected"); ---- --- var TINY={}; function T$(i){return document.getElementById(i)} function T$$(e,p){return p.getElementsByTagName(e)} TINY.accordion=function(){ function slider(n){this.n=n; this.a=[]} slider.prototype.init=function(t,e,m,o,k){ var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0; for(i;i<l;i++){ var v=n[i]; if(v.nodeType!=3){ this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')'); if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++ } } this.l=s }; slider.prototype.pr=function(f,d){ for(var i=0;i<this.l;i++){ var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t); if((k!=1&&c.d==-1)&&(f==1||i==d)){ c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1) }else if(k>0&&(f==-1||this.m||i==d)){ c.d=-1; h.className=''; su(c,-1) } } }; function su(c){c.t=setInterval(function(){sl(c)},20)}; function sl(c){ var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px'; c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')'; if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)} }; return{slider:slider} }();

  • JavaScriptエラーが出ます…

    2つのJavaScriptエラーが出て大変困っております。 どなたか分かる方いらっしゃいませんでしょうか? ※当方はJavaScriptは分かりません。 検索にて調査いたしましたが、情けないですがもうお手上げ状態です。 ▼1つめ----------------------------------------------▼ メッセージ: 'null' は Null またはオブジェクトではありません。 ライン: 8 文字: 3 コード: 0 コード内容 以下 var accordion=function(){ var tm=10; var sp=10; function slider(n){ this.nm=n; this.arr=[]; this.sel='' } slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); l=h.length; for(i=0;i<l;i++){ var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+".process(this)"); if(k!=null&&c==i){this.sel=d.className=k} } l=s.length; for(i=0;i<l;i++){ var d=s[i]; d.maxh=d.offsetHeight; if(c!=i){d.style.height='0'; d.style.display='none'} } } slider.prototype.process=function(d){ var i,l; l=this.arr.length; for(i=0;i<l;i++){ var h=this.arr[i]; var s=h.nextSibling; if(s.nodeType!=1){s=s.nextSibling} clearInterval(s.timer); if(h==d&&s.style.display=='none'){ s.style.display=''; setup(s,1); h.className=this.sel} else if(s.style.display==''){setup(s,-1); h.className=''} } } function setup(c,f){c.timer=setInterval(function(){slide(c,f)},tm)} function slide(c,f){ var h,m,d; h=c.offsetHeight; m=c.maxh; d=(f==1)?Math.ceil((m-h)/sp):Math.ceil(h/sp); c.style.height=h+(d*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.timer)} else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.timer)} } return{slider:slider} }(); ▲1つめここまで----------------------------------------------▲ ▼2つめ----------------------------------------------▼ メッセージ: 'obj.length' は Null またはオブジェクトではありません。 ライン: 238 文字: 10 コード: 0 コード内容 以下 http://www.myulond.com/js.txt ▲1つめここまで----------------------------------------------▲ どうぞ、ご教授よろしくお願いいたします。

  • ドロップダウンメニューのカスタマイズ

    こちらのサイトで配布されているドロップダウンメニューのカスタマイズについてお聞きしたいのですが、 http://www.leigeber.com/2008/11/drop-down-menu/ デモページ http://sandbox.leigeber.com/dropdown-menu/index.html メニューが表示されるアニメーションの速度を調節することは可能なんでしょうか? できればもう少し速くしたいと思っています。 Javascriptについて全く知識がないので、ネットで色々検索して探したのですがカスタマイズ方法について見当たらず、ここに質問させていただきました。 どうぞよろしくお願いいたします。 以下がjsのソースになります。 -------------------- var menu=function(){ var t=15,z=50,s=6,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(this.n+'.st('+i+',true)'); h.onmouseout=new Function(this.n+'.st('+i+')'); } } dd.prototype.st=function(x,f){ var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0]; clearInterval(c.t); c.style.overflow='hidden'; if(f){ p.className+=' '+a; if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0} if(c.mh==c.offsetHeight){c.style.overflow='visible'} else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)} }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)} } function sl(c,f){ var h=c.offsetHeight; if((h<=0&&f!=1)||(h>=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearInterval(c.t); return } var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }();

  • IE8で動作が遅くなるjavascriptメニュー

    いつもお世話になります。サイト製作初心者peace193と申します。 サンプルサイトを参考にjavascript+cssのグローバルメニュー、ローカルメニューを作ってみたのですが、IE7では快適に動く一方、IE8では動作が遅くなってしまいます。原因がわからずこちらに質問した次第です。 テストサーバに該当ページをUP致しました。お忙しい中恐縮ですが、ご教示のほど、なにとぞよろしくお願い申し上げます。 http://doa.nts21.jp/test001.html http://doa.nts21.jp/test002.html 参考サイトURL グローバルメニュー http://www.leigeber.com/2008/11/drop-down-menu/ ローカルメニュー http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html グローバルメニューjavascript var menu=function(){ var t=15,z=50,s=6,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(this.n+'.st('+i+',true)'); h.onmouseout=new Function(this.n+'.st('+i+')'); } } dd.prototype.st=function(x,f){ var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0]; clearInterval(c.t); c.style.overflow='hidden'; if(f){ p.className+=' '+a+x; if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0} if(c.mh==c.offsetHeight){c.style.overflow='visible'} else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)} }else{p.className=p.className.replace(a+x,''); c.t=setInterval(function(){sl(c,-1)},t)} } function sl(c,f){ var h=c.offsetHeight; if((h<=0&&f!=1)||(h>=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearInterval(c.t); return } var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }();

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

    アコーディオンナビゲーションの作成しておりましたがfirefoxでは問題なく反映されるのですが IEで見るとtop,bottom,leftの三方に枠みたいなものが出てしまいます。原因がわからず困っています。誰かわかる方いらっしゃったらご回答お願い致します。 ※IEの画像データを添付しております。 ※jsはhttp://lab.komadoya.com/blog/2008/08/waterfall-js.phpよりダウンロードしました。 【CSS】 *{ margin:0; padding:0; } h1{ margin:30px 0; font-size:150%; } h2{ margin-bottom:3px; font-size:125%; color:#9ac1c9; } #contents{ margin-bottom:20px; } #localNav{ float: left; width: 180px; } #alphaBlock{ float:left; width:590px; margin-top:20px; } #footer{ margin-bottom:5px; padding-top:5px; border-top:1px solid #000; } #footer address{ font-style:normal; font-size:87.5%; text-align:center; } /*-------------------- accordion --------------------*/ .accordionBox{ width: 180px; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 73%; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .accordion{ width:180px; } .accordion dt{ width:180px; border-top:none; font-weight:bold; cursor:pointer; } .accordion dd{ overflow:hidden; display:none; background:#FFF; } .accordion ul{ width:180px; list-style:none; border-top:none; } .accordion a, .accordion a:active, .accordion a:visited{ display:block; color:#333; text-decoration:none; background:#eaf0f2; width:180px; } .accordion a:hover{ background-color:#d9e1e4; color:#000; } /*-------------------- float clear --------------------*/ #contents, .dropdownBox, .accordionBox, .clearFix{ overflow:hidden; } #contents:after, .dropdownBox:after, .accordionBox:after, .clearFix:after{ content:""; display:block; clear:both; height:0px; overflow:hidden; } /*\*/ * html #contents, * html .dropdownBox, * html .accordionBox, * html .clearFix{ height:1em; overflow:visible; } /**/ /* or */ .clear{ clear:both; } 【html】(一部) <dl class="accordion" title="eight"> <dt id="ddheader-eight"><a href="A"><img src="images/common/left_nav_04.gif" width="180" height="40"></a></dt> <dd id="ddcontent-eight"> <ul> <li><a href="a">お茶</a></li> <li><a href="b">酢</a></li> <li><a href="c">滋養強壮・栄養ドリンク</a></li> </ul> </dd> </dl> <dl class="accordion" title="nine"> <dt id="ddheader-nine"><a href="B"><img src="images/common/left_nav_05.gif" width="180" height="40"></a></dt> <dd id="ddcontent-nine"> <ul> <li><a href="a" target="_top">シェイク・ドリンク</a></li> <li><a href="b">代替食</a></li> <li><a href="c">サプリメント</a></li> <li><a href="d">ダイエットインナー・ウェア</a></li> <li><a href="e">甘味料</a></li> </ul> </dd> </dl>

    • ベストアンサー
    • CSS
  • jQueryを使ったアコーディオンメニュー

    現在、色々なサイトを見ながら、jQueryを使用した アコーディオンメニューを作成しています。(かなりの初心者です。) リンク先をクリックして、ページが移動した際に、 メニューの開いた状態が保持されるようにしたいのですが、 どうすれば良いのかわからず困っています。 //////////////////////////////////////////////// <script type="text/javascript"> <!-- var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index >= 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); //--> </script> html部分 <ul> <li>ABC <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li>... </ul> //////////////////////////////////////////////// ↑このような感じで表記しています。 どなたかお詳しい方、ご教示よろしくお願いします。

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

    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>