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>

回答No.2

fujillin · ベストアンサー

No1です。

CSSのクロスブラウザについてはよく知らないのですが、Webで検索してみると、これはかなり常識みたいですね。
もともと、擬似クラスはリンクタグがもとになっているみたいなので、IEではaタグしか対応していなのかな？

簡単な実験をしてみましたが、やはりリンクタグ以外は反応しませんでした。（IE6）
（もちろん、リストもダメです。リンクタグを使えば可能です。）

IEでも擬似クラスを使えるようにすることを考えている人もたくさんいるみたい。
＜参考＞
http://blog.digital-squad.net/article/44204963.html
http://jmblog.jp/archives/88
http://builder.japan.zdnet.com/news/story/0,3800079086,20366697,00.htm

まったく別の考え方ですが、すでにスクリプトを使用していらっしゃるので、CSSによらない方法として、javascriptでロールオーバーする方法を用いれば、IEでも同じ処理で可能になります。

お礼

ご回答ありがとうございます。
仕事と製作の多忙によりお礼が遅くなってしまって申し訳ございませんでした。

教えて頂いた参考サイト様の方法を試した所、望んでいた結果にすることができました。
DLしたファイルを外部ファイルでCSSに読み込むだけで、今までの悩みが解消されてとても驚いています。
大変助かりました。

メニューは全カテゴリ分がもうすぐで完成いたします。
ご教示頂き、本当にありがとうございました。

回答No.1

fujillin

ライブラリの内容を変更したいのであれば、ご自分でやるか作者に依頼するのがよろしいのでは？
http://www.leigeber.com/2009/03/accordion/
サポートも受付てくれているようです。
http://www.leigeber.com/contact/

実験してないけど、「スライド対象外」とするようなclassでも決めておいて、それが設定されている大項目についてはスライドしないようにでも修正してあげればよいのでは？
（スライドを実行する前に、そのclassかどうか確認してから実行すればよい）

補足

回答ありがとうございます。

>「スライド対象外」とするようなclass
考えてみたのですがやはり自分には難しいようです。。
折角アドバイスを頂いたのですが、活かす事が出来ず申し訳ござません。

リンクの飛び先で、
slider1.init("slider",0,"open");
のように開いて待たせるシンプルな方法に変更しようと思います。

追加のご質問で申し訳ございませんが、IEで「span:hover」がうまく動作いたしません。
調べた所IEの仕様のようですが、代わりの方法を考える際、listを使うのがよいでしょうか？
（なお、私の環境winXP IE7では「span:hover」も問題なく動いているようです）

ご教示くださいますよう、よろしくお願い致します。