jQueryでボタンを押したときにメニューを表示させたり非表示にしたりする

●スクリプト（前提：jQueryが読み込まれていること）

<script type="text/javascript">

$(function(){

  $("button#yamato").click(function(){

    $("div#i_kantou").css("display","");

  })

  $("button#kenichiro").click(function(){

    $("div#i_kantou").css("display","none");

  })

});

</script>

<script type="text/javascript"><!--

function hiraku(tgt){ // 開く

if (document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="";

}

}

function toziru(tgt){ // 閉じる

if (document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="none";

}

}

//--></script>

●HTML

<button id="yamato">表示する</button>

<button id="kenichiro">消す</button>

<div onMouseover="hiraku('i_kantou')" onMouseout="toziru('i_kantou')" class="c_kantou">

関東

<div id="i_kantou" style="display: none;">

<a class="c_tokyo" href="#">東京</a>

<a class="c_kanagawa" href="#">神奈川</a>

<a class="c_saitama" href="#">埼玉</a>

</div><!-- end of i_kantou -->

</div><!-- end of c_kantou -->

●CSS

.c_kantou{

background-color:lightskyblue;

border: 0px solid #FF0000;

width:200px;

float:left;

}

.c_tokyo{

display: block; /* インラインボックスをブロックボックスに変更する */

text-decoration: none; /* リンクの下線を消す */

border:0px solid #FFFFFF;

background-color:lightgreen;

}

.c_kanagawa{

display: block; /* インラインボックスをブロックボックスに変更する */

text-decoration: none; /* リンクの下線を消す */

border:0px solid #FFFFFF;

background-color:springgreen;

}

.c_saitama{

display: block; /* インラインボックスをブロックボックスに変更する */

text-decoration: none; /* リンクの下線を消す */

border:0px solid #FFFFFF;

background-color:greenyellow;

}

●解説

ボタン「表示する」をクリックするとサブメニューが表示される。「消す」をクリックすると消える。

これらボタンクリックで起動されるスクリプトはjQueryで実装したものである。

jQueryにてcssのdisplayを操作している。

一方、メニューにマウスカーソルを乗せたとき、離したときは、

jQueryではない通常のJavaScriptの関数が動作する。

これも、cssのdisprayを操作するものである。

両者の違いは、jQueryを使うか、それとも使わない（生のJavascript）かであるが、

実施している処理は、いずれもCSSのdisprayの操作である。

サンプルソース

http://tokyo-webs.jp/sample_source/130327c/

東京ウェブ制作