画像のリンクをクリックするとメニューが表示されてまた

画像のリンクをクリックするとメニューが表示されてまたクリックするとメニューが閉じる方法を教えて下さい。
例を挙げると
http://shop.hangame.co.jp/itemshop.nhn?shopid=81
の左メニュー単品パーツとかアバガチャのリンクをクリックするとメニューが表示されるって感じです。

No.1 ベストアンサー 回答者： zeff#1 回答日時： 2010/02/03 13:06

ハンゲームのページが

どういう構造になっているのかは
よくわかりませんでしたが、
javascriptで行なう方法なら。

<script type="text/javascript" language="JavaScript">
<!--
var flag = null;
function Sample(id){
if (flag == id){
document.getElementById(id).style.display = 'none';
flag = null;
}else{
if (flag != null){
document.getElementById(flag).style.display ='none';
}
document.getElementById(id).style.display = 'block';
flag = id;
}
}
// -->
</script>

<div>
<h4 onclick="Sample('target1')"><img src="ヘッダ画像１.gif" alt="ヘッダ画像１" /></h4>
<ul id="target1" style="display:none;">
<li>リストA
<ul>
<li><a href="">リストA-a</a></li>
<li><a href="">リストA-b</a></li>
</ul>
</li>

<li>リストB
<ul><li>
<a href="">リストB-c</a></li>
<li><a href="">リストB-d</a></li>
</ul>
</li>

</ul>

<h4 onclick="Sample('target2')"><img src="ヘッダ画像２.gif" alt="ヘッダ画像２" /></h4>
<ul id="target2" style="display:none;">
<li>リストC
<ul>
<li><a href="">リストC-a</a></li>
<li><a href="">リストC-b</a></li>
</ul>
</li>

<li>リストD
<ul>
<li><a href="">リストD-c</a></li>
<li><a href="">リストD-d</a></li>
</ul>
</li>

</ul>

</div>

この回答へのお礼

完璧でした。
どうもありがとうございます。

お礼日時：2010/02/03 20:03