DHTML ツリーメニュー ＊ 教えてください！

質問

こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。

作ろうとしているメニューは
メルシー３
├メルシー３の特徴
├メルシー３の仕組
├メルシー３の償還例
└お申込メモ/運用レポート
メルシー４
├メルシー４の特徴
├メルシー４の仕組
├メルシー４の償還例
└お申込メモ/運用レポート
。。というかんじで、メルシー３、４をクリックすると、
詳細メニュがツリーメニューで見れるというものです。

＊問題は＊＊＊
ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。
例えば、すべての項目が閉じている状態からはじめます。
メルシー３をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー４をクリックすると、今の状態ではメルシー３が開いたまま、メルシー４が開いてしまいます。
これをデフォルトで１つの項目しか開かないようにしたいのです。

スクリプトの現状は以下のようになっています。

<script type="text/javascript"><!--
if (document.getElementById)
document.write('<style type="text/css"> .tree { display: none; }<'+'/style>');

function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else document.getElementById(id).style.display="block";
parent.contents.open(id+".html","contents")
}

と定義して

<tr>
<td id="sub">
<a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー３</a><br></td>
</tr>
<td>
<div id="contents/mercy3" class="tree">
├<a href="#" target="contents">メルシー３の特徴 </a><br>
├<a href="未設定" target="contents">メルシー３の仕組 </a><br>
├<a href="未設定" target="contents">メルシー３の償還例 </a><br>
└<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td>
</tr>
<tr>
<td id="sub">
<a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー４</a><br></td>
</tr>
<tr>
<td>
<div id="contents/mercy4" class="tree">
├<a href="#" target="contents">メルシー４の特徴 </a><br>
├<a href="未設定" target="contents">メルシー４の仕組 </a><br>
├<a href="未設定" target="contents">メルシー４の償還例 </a><br>
└<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td>
</tr>

とボディーで記述しています。

どなたか、ご存知でしたら、よろしくお願いいたします。

回答No.2

leap_day

こんにちは

とりあえず３パターン書きますね
parent.contents.open(id+".html","contents")はよく分からなかったので省いていますｍ（－－）ｍ

【１】２つしかないのであればその２つを閉じて対象を開く

function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else {
document.getElementById("contents/mercy3").style.display="none";
document.getElementById("contents/mercy4").style.display="none";
document.getElementById(id).style.display="block";
}
}

【２】たくさんあってid名の数字だけが変わる
(i=《初めの数値》;i<《終わりの数値+1》;i++)に変更してください

function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else {
for(i=3;i<5;i++) {
document.getElementById("contents/mercy"+i+"").style.display="none";
}
document.getElementById(id).style.display="block";
}
}

【３】divを対象に閉じる
(i=《ページの先頭から数えてn個目-1》;i<《ページの先頭から数えてn個目》;i++)に変更してください
→１個目の<div>がi=0となります

function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else {
for(i=0;i<2;i++) {
document.getElementsByTagName("div")[i].style.display = "none";
}
document.getElementById(id).style.display="block";
}
}

補足

こんにちは。
ご丁寧にありがとうございます！
早速試してみます。

回答No.1

yambejp

微妙に突っ込みどころが多いので、勝手にだいぶいじりました。
処理事態はたとえばこんな感じで消しこみしれてやれば？

<style type="text/css">
#sub,#sub ul,#sub li{
list-style:none;
padding:0px;
margin:0px;
}
#sub .tree {
display: none;
}

</style>
<script type="text/javascript">
function treeView(id) {
var obj=document.getElementById(id);
obj.style.display=(obj.style.display!='block')?'block':'none';
var ulgroup=document.getElementsByTagName("ul");
for(var i=0;i<ulgroup.length;i++){
if(ulgroup[i].className=="tree" && ulgroup[i].id!=id) ulgroup[i].style.display='none';
}
}
</script>

<ul id="sub">
<li><a href="#" onClick="treeView('mercy1');" title="クリックでメニューが開閉します">メルシー１</a></li>
<ul id="mercy1" class="tree">
<li>├<a href="#" target="contents">メルシー１特徴 </a></li>
<li>├<a href="#" target="contents">メルシー１の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー１の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
<li><a href="#" onClick="treeView('mercy2');" title="クリックでメニューが開閉します">メルシー２</a></li>
<ul id="mercy2" class="tree">
<li>├<a href="#" target="contents">メルシー２特徴 </a></li>
<li>├<a href="#" target="contents">メルシー２の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー２の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
<li><a href="#" onClick="treeView('mercy3');" title="クリックでメニューが開閉します">メルシー３</a></li>
<ul id="mercy3" class="tree">
<li>├<a href="#" target="contents">メルシー３特徴 </a></li>
<li>├<a href="#" target="contents">メルシー３の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー３の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
<li><a href="#" onClick="treeView('mercy4');" title="クリックでメニューが開閉します">メルシー４<a></li>
<ul id="mercy4" class="tree">
<li>├<a href="#" target="contents">メルシー４特徴 </a></li>
<li>├<a href="#" target="contents">メルシー４の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー４の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
</ul>

お礼

わーい。ありがとうございます～～～！！！
早速試してみますね。

感謝感激です！

補足

お礼と補足が反対でごめんなさい。
これで大丈夫でした。
ありがとうございます～！（涙）