てるてるブログ

てるてるぼうずの日常やらお勉強やら

アコーディオンメニュー

Posted on | 2月 9, 2015 | No Comments

jquery

jQueryのアコーディオンメニューのカンタンなのが見つかったのでちょいメモ。

参考にしたのはこちら

特にライブラリを使うでもなく使用するページに直接記述出来るのが楽。
ちょっと要素を開閉させたいって時にちょうどいいです。

head内にjQueryを読み込んでjsを記述

$(function(){
  $("#acMenu dt").on("click", function() {
    $(this).next().slideToggle();
  });
});

#acMenuのリストのdtの次の要素(dd)を開閉するよ〜ってこと。
これでCSSでddを見えなくしておけば(display:none;)OK。

クリックする要素に直接記述するのもあり。
ちょっと開閉させたい…って時にはこのくらいでもいいのかな?

<dl>
  <dt onclick="$('#acMenu1').slideToggle();">メニュー1</dt>
  <dd id="acMenu1" style="display: none;">アコーディオン1</dd>
  <dt onclick="$('#acMenu2').slideToggle();">メニュー2</dt>
  <dd id="acMenu2" style="display: none;">アコーディオン2</dd>
</dl>

まあ、別にリストでなくても出来るのね…ってことで

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin