今回は、web初心者向けにクリックをするとコンテンツが表示するjQueryを実装します。
photo credit: Poe Tatum via photopin cc
ページコンテンツ
jQueryを動かすために STEP1
head内にいつもおなじみののコードを書いてください。
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
実際に動く記述を書きます STEP2
|
1 2 3 4 5 6 7 8 9 |
$(function(){ //最初から非表示 $('dd.detail').hide(); $("dt.title").click(function(){ $(this).next().slideToggle(); }); }); |
＄('dd.detail').hide()；
最初からコンテンツを非表示にするための記述です。
非表示ではなく、表示させたい場合はこの記述を削除してください。
HTMLを設置します STEP3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<dl class="menu"> <dt class="title">コンテンツ</dt> <dd class="detail"> <ul> <li>12月1日</li> <li>12月2日</li> <li>12月3日</li> <li>12月4日</li> <li>12月5日</li> <li>12月6日</li> </ul> </dd> </dl> |
CSSを記述します STEP4
|
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css"> li{ list-style-type: none; line-height:1.6; } .title{ cursor: pointer; } </style> |
見た目のためのCSSでもありますが、
1点 タイトルをクリックするときに「クリックができる」とわかる表示をつけるためにcursorを付けました。
まとめ
[サンプル] jQuery クリックをするとコンテンツが表示されるしくみを実装する
サンプルのソースをコピーしても動きます。
※firefox、クローム、IEで動いていることを確認しております。
