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>
<!--side end-->

（例：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内がスムーズに開閉。という形です。
どうか、ご教授のほうよろしく御願いします。

回答No.2

fujillin

少々乱暴ですが…

孫のulを子のli内に入れることにして、以下でとりあえず動作します。
$(function(){
$('#side ul').hide();
$('#side h4, #side li a').click(function() {
$(this).next('ul').slideToggle('fast');
});
});

cursor:pointerはCSSで定義すればよいので省略してありますが、3行目を
$('#side h4, #side li a').css("cursor","pointer").click(function() {
にしても可能。（リンク要素にも設定しちゃってるけど）

----------------------------------------------------

通常、階層構造のものを作る場合は、全体を同じ構成にしておいたほうが便利です。
参考にほとんど同じような動作のライブラリの例を。
http://onehackoranother.com/projects/jquery/droppy/
（トリガーがクリックでなくホバーですが…。また、レイアウトは少し違いますがCSSで多分変えられます。）
似たようなライブラリは、他にもたくさんあるはずですので、探してみれば参考になると思います。

お礼

解答ありがとうございます！
早速書いて頂いたコードを試しました。確かにIE6では表示されました！ですが、IE6を基準でやっているので構わないかもしれないのですがこの方法だと今度はMacで表示されなくなってしまいました。2階層目の文字は表示されるのですが背景がが動かず、サイドナビゲーションの最前面？に表示されてるような感じです。出来れば、これの対処法もよろしくお願いします。
因みに、イメージはこんな感じです。
http://sandbox.leigeber.com/javascript-accordion/index.html
よろしくお願いします。

回答No.1

yambejp

ぱっとみたかぎり、ulの子要素としてulを指定していますよね？
ulはliしか子要素をもてません。そのあたりの文法違反の修正から
始めてみてはどうでしょうか？

お礼

解答ありがとうございます！
>ulはliしか子要素をもてません。
上記の通り、確かに文法違反ですが、このように少し乱暴にしないとSafariですら実現できないのです。
他に何か方法はありますでしょうか？すいません><