東京ウェブ制作ブロマガ

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

2013/03/27 18:41 投稿

  • タグ:
  • 登録タグはありません
  • タグ:
  • 登録タグはありません
●スクリプト(前提: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の操作である。

サンプルソース

ブロマガ会員ならもっと楽しめる!

  • 会員限定の新着記事が読み放題!※1
  • 動画や生放送などの追加コンテンツが見放題!※2
    • ※1、入会月以降の記事が対象になります。
    • ※2、チャンネルによって、見放題になるコンテンツは異なります。
東京ウェブ制作ブロマガ

東京ウェブ制作ブロマガ

大和賢一郎

月額:¥550 (税込)

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事

継続入会すると1ヶ月分が無料です。 条件を読む

東京ウェブ制作チャンネル

東京ウェブ制作チャンネル

月額
¥550  (税込)
このチャンネルの詳細