ツリーメニューについて

質問

Java Scriptのあいうえおを学んでいる最中の超初心者です。
以下のツリーメニューを作成しています。
親メニュー（画像2枚）クリックしたらon画像⇒子メニュー（テキスト）表示。
また親メニュークリックしたらoff⇒子メニュー非表示。

しかし、私が作ったツリーメニューはデフォルト（html）で強制的に開いているためか、メニューを3回ぐらいクリックしないと閉じません。手っ取り早い処置を望んでいます。ソースは以下のとおりです。

【htmlソース】
<table border="0">
<tr><td><a href="javascript:localMenu('localMenu02');"><img src="imgs/on.gif" name="localMenu02Icon"></a></td></tr>
<tr><td id="localMenu02" style="display:block;">
<table border="0">
<tr><td><img src="imgs/a.gif" broder="0"><a href="a.html">ＡＢＣ</a></td></tr></table></td></tr></table>

【Java Scriptソース】
function localMenu(lyName){
if(!document.getElementById){return;}
if(loadFlag != 'true'){return;}

if(lMenuStockID == lyName){
document.getElementById(lyName).style.display = 'none';
document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.');
lMenuStockID = 'noData';
return;
}else if(lMenuStockID != 'noData'){
document.getElementById(lMenuStockID).style.display = 'none';
document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.');
lMenuStockID = 'noData';
}

document.getElementById(lyName).style.display = 'block';
document.images[lyName + 'Icon'].src = document.images[lyName + 'Icon'].src.replace('_of.','_on.');
lMenuStockID = lyName;
}

上記のソースにデフォルトでオープンしてるかしてないかのフラグを追加しなければならないのですがフラグの書き方がわかりません。

勉強不足は十分に承知です。お時間がある方、フラグを教えていただけませんでしょうか？何卒よろしくお願いいたします。

回答No.2

redfox63 · ベストアンサー

複数あったとしても同じ理屈だと思います
localMenu01からlocalMenu10まであるなら
var lMenuStackID;
lMenuStackID = new Array();
lMenuStackID[1] = "localMenu01";
lMenuStackID[2] = "localMenu02";
lMenuStackID[3] = "localMenu03";
などとして配列であっ使います

実際の処理ルーチンを
　　function localMenu2(lyName,nIndex) {
　　　　var style, src, des, obj;
　　　　if ( lMenuStockID[nIndex] == lyName ) {
　　　　　　// 前回ONに設定したのでOFFに設定する
　　　　　　style = "none";
　　　　　　src = "on.";
　　　　　　des = "off.";
　　　　　　lMenuStockID[nIndex] = "";
　　　　} else {
　　　　　　// 前回OFFに設定したのでONに設定する
　　　　　　style = "block";
　　　　　　src = "off.";
　　　　　　des = "on.";
　　　　　　lMenuStockID[nIndex] = lyName;
　　　　}
　　　　// tdエレメントを取得
　　　　obj = document.getElementById( lyName );
　　　　obj.style.display = style;
　　　　// imgエレメントを取得
　　　　obj = document.getElementById( lyName + "Icon" );
　　　　obj.src = obj.src.replace( src, des );
　　}
といった具合に 何番目のメニューを操作したいのかを nIndexに与えてやりましょう

<a href="javascript:localMenu('localMenu02',2);">
といった具合にして呼び出します

お礼

迅速かつ丁寧なご回答を誠にありがとうございます。
お蔭様で、解決できました。

本当にありがとうございました。

回答No.1

redfox63

loadFlagは必要ないと思います
lMenuStockIDと引数lyNameを比較すれば良いでしょう

<script type="text/javascript">
<!--
　　// 外部変数にして前回の設定を保存
　　// 最初がONなので 『localMenu02』を初期値とする
　　var lMenuStockID = "localMenu02";
　　function localMenu2(lyName) {
　　　　var style, src, des, obj;
　　　　if ( lMenuStockID == lyName ) {
　　　　　　// 前回ONに設定したのでOFFに設定する
　　　　　　style = "none";
　　　　　　src = "on.";
　　　　　　des = "off.";
　　　　　　lMenuStockID="";
　　　　} else {
　　　　　　// 前回OFFに設定したのでONに設定する
　　　　　　style = "block";
　　　　　　src = "off.";
　　　　　　des = "on.";
　　　　　　lMenuStockID= lyName;
　　　　}
　　　　// tdエレメントを取得
　　　　obj = document.getElementById( lyName );
　　　　obj.style.display = style;
　　　　// imgエレメントを取得
　　　　obj = document.getElementById( lyName + "Icon" );
　　　　obj.src = obj.src.replace( src, des );
　　}
//-->
</script>
といった具合でしょう

補足

早速ご回答いただ誠にありがとうございます。
初歩的なことをお伺いさせていただきます。

たとえば、「localMenu02」としていますが、
localMenu01～10（複数）ある場合はどうすればいいのでしょうか？

勉強不足でお恥ずかしいです。
恐れ入りますが、ご教示ください。