クリックで表示、非表示するメガメニュー
クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。
下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。
http://www.skuare.net/test/jmegadropdown.html
ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。
これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？
具体的にはマイクロソフトのページの上にあるようなメニューです。
http://www.microsoft.com/ja-jp/default.aspx
自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。
このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？
よろしくお願いします。
function test1() {
$("#topnav li .products1 .sub").toggle();
$("#topnav li .sale1 .sub").css("display", "none");
}
function test2() {
$("#topnav li .products1 .sub").css("display", "none");
$("#topnav li .sale1 .sub").toggle();
}
<ul id="topnav">
<li>
<a href="#" class="products" onclick="test1()">Products</a>
<div class="products1">
<div style="opacity: 0; display: none; width: 600px;" class="sub">
<ul>
<li><h2><a href="#">menu1</a></h2></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
<ul>
<li><h2><a href="#">menu2</a></h2></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="sale" onclick="test2()">Sale</a>
<div class="sale1">
<div style="opacity: 0; display: none; width: 450px;" class="sub">
<ul>
<li><h2><a href="#">menu</a></h2></li>
<li><a href="#">Link - 1</a></li>
<li><a href="#">Link - 2</a></li>
<li><a href="#">Link - 3</a></li>
<li><a href="#">Link - 4</a></li>
</ul>
</div>
</div>
</li>
お礼
そうそれです。ありがとうございます。 あ、でもso-netブログはjsファイル非対応だったｗｗｗ 使えるブログサービス探さないと（笑）