FireFoxだけちゃんとうごいてくれないです

質問

いつもお世話になっています。
Javascriptでメニューを閉じたり開いたりさせたくて難儀してます。

<script type="text/javascript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</SCRIPT>

<li class="li>
<a href="javaScript:treeMenu('treeMenu')">メニュー</a>
</li>
<DIV id="treeMenu" style="display:none">
<li class="li_sub">
<a href="index.html">　小メニュー１　</A>
</li>
<li class="li_sub">
<a href="index.html">　小メニュー２　</A>
</li>
</DIV>

こんな感じでクリックすると小メニューが出てさらにクリックで非表示になるようにしています。
ＩＥ８やGoogleChromeですとうまくいきます。
（Safariではまだ試していません。）
が・・・
FireFox3ではウンともスンともいいません。
記述自体がFirefox3では受け付けないのでしょうか？

根本的に考え方が違うぞ！とか
そういったご意見でもかまいません。
どうかお助けください。

よろしくお願いいたします。

回答No.2

yambejp · ベストアンサー

補足

＞メニューでidを使うと運用面で破たんするので構造を使って
＞処理した方がいいですよ

＞上記、もしよろしければ解説していただけますか？

idを指定してメニューの表示・非表示をすることは
一文書にメニューが一つであるという保証もなく
各メニューに細かくidをどう振って管理するか調整することになります。
idは一文書のなかでは同じ名称をつけてはいけない規則になって
いますので、idを任意でつけて管理するのは思いのほか大変です。

今回のケースのようにメニューに対する子メニューなど構造が
はっきりしているのであれば、その構造を利用して処理をするのが
妥当だという意味です。

お礼

再度ありがとうございます。

丁寧な解説で理解しました。
（理解したつもり？）

本当にありがとうございます！

回答No.1

yambejp

＞<li class="li>

のクォーテーションを閉じてないから？
メニューでidを使うと運用面で破たんするので構造を使って
処理した方がいいですよ

<script type="text/javascript">
function treeMenu(obj) {
var n=obj.parentNode;
while(n){
n=n.nextSibling;
if(n.nodeName=="UL"){
n.style.display =(n.style.display == 'none')? "block":"none";
break;
}
}
return false;
}
</SCRIPT>

<ul>
<li class="li"><div><a href="#" onclick="return treeMenu(this)">メニュー1</a></div>
<ul style="display:none">
<li class="li_sub"><a href="index.html">小メニュー1-1</A></li>
<li class="li_sub"><a href="index.html">小メニュー1-2</A></li>
</ul>
</li>
<li class="li"><div><a href="#" onclick="return treeMenu(this)">メニュー2</a></div>
<ul style="display:none">
<li class="li_sub"><a href="index.html">小メニュー2-1</A></li>
<li class="li_sub"><a href="index.html">小メニュー2-2</A></li>
</ul>
</li>
<li class="li"><div><a href="#" onclick="return treeMenu(this)">メニュー3</a></div>
<ul style="display:none">
<li class="li_sub"><a href="index.html">小メニュー3-1</A></li>
<li class="li_sub"><a href="index.html">小メニュー3-1</A></li>
</ul>
</li>
</ul>

お礼

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

＞<li class="li>

は本文のみのミスでした。
指摘していただきありがとうございます。

まだまだ勉強中の身ですので
じっくり拝見させていただきます。

補足

回答への質問となってしまい恐縮ですが

メニューでidを使うと運用面で破たんするので構造を使って
処理した方がいいですよ

上記、もしよろしければ解説していただけますか？

idとかclassとかの理解がイマイチなヤツですので
せっかくの説明が理解できないかもしれませんが、
調べて勉強したいと思いますのでよろしくお願いいたします。