ブログ練習帳

J Queryでぱたぱたアコーディオンを作ってみる

WebデザイナーのためのjQuery入門でお勉強中です。

アコーディオンタイプのぱたぱたメニューをJQueryでやってみました。ちょっと心もとないけど･･･。どきどき。

あくまで勉強途中の見習のビボー録です。あしあと、あしあと･･･。ということで、許してください。

XHTML

<dl class="patapata">

  <dt>ぱたぱた1番</dt><dd>1番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>

  <dt>ぱたぱた2番</dt><dd>2番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>

  <dt>ぱたぱた3番</dt><dd>3番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>

  <dt>ぱたぱた4番</dt><dd>4番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>

  <dt>ぱたぱた5番</dt><dd>5番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>

</dl>

<dl class="patapata" id="imgs">

  <dt>今日の見習1号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>

  <dt>今日の見習2号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>

  <dt>今日の見習3号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>

  <dt>今日の見習4号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>

  <dt>今日の見習5号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>

</dl>

CSS

*{

margin:0;

padding:0;

font-size:15px;

}

dl{

width:200px;

position:relative;

}

dd{

border:1px #999 solid;

background-color:#FFCCCC;

padding:10px;

line-height:1.1em;

border-top:none;

}

dt{

border:1px #999 solid;

background-color:#FF66CC;

padding:10px;

}

#imgs dd{

padding:0;

line-height:1;

border:none;

background-color:transparent;

}

dl#imgs {

width:260px;

}

#imgs dt{

background-color:#00CCFF;

width:240px;

}

Java Script (JQuery)

// JavaScript Document

  $(function(){

$('.patapata').each(function(){

var dl=$(this);

var allDt=dl.find('dt');

var allDd=dl.find('dd');

allDd.hide();//すべてのddを非表示

allDt.css('cursor','pointer');//カーソル変化

allDd.css('cursor','pointer');//カーソル変化

allDt.mouseenter(function(){

var dt=$(this);

var dd=dt.next();

allDd.hide();//すべてのddを非表示

dd.show();//カーソルが乗った次のddのみ表示

dt.css('opacity',0.5);//カーソルが乗ったdtの色を薄くする

});

allDt.mouseleave(function(){

var dt=$(this);

dt.css('opacity',1);//マウスがdtから離れると色が戻る

});

allDd.mouseenter(function(){

var dd=$(this);

var dt=dd.prev();

dt.css('opacity',0.5);//ddにマウスが乗ると直前のdtの色が薄くなる

});

allDd.mouseleave(function(){

var dd=$(this);

var dt=dd.prev();

dt.css('opacity',1);//ddからマウスが離れると直前のdtの色が戻る

});

dl.mouseleave(function(){

allDd.hide();//dlからマウスが離れると、その中のddはすべて非表示

});



});//each終わり

})//function終わり

サンプルはこちら

2012年1月24日12:46 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)