PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【jQuery】アコーディングメニューの作り方と考え方

以下のコラムを利用して、アコーディングメニューを作ります。


ASCII.jp:40分で覚える!jQuery速習講座 (6/6)

制作例(ソース)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオン</title>
<style>
*{
    margin:0;
    padding:0;
}
dl{
    width:400px;
    margin:50px auto;
}
dl dt{
    background:#7CADB6;
    border-bottom:1px solid #FFFFFF;
    cursor:pointer;
    padding:10px;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo ,sans-serif;
}

p{
  padding:10px;
}

dl dd{
    border:1px solid #7CADB6;
    border-top:none;
    height:300px;
}
</style>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>
<body>

<dl>
<dt>テキスト1</dt>
<dd>
<p>テキスト...(中略)...テキスト</p>
</dd>
<dt>テキスト2</dt>
<dd>
<p>テキスト...(中略)...テキスト</p>
</dd>
<dt>テキスト3</dt>
<dd>
<p>テキスト...(中略)...テキスト</p>
</dd>
<dt>テキスト4</dt>
<dd>
<p>テキスト...(中略)...テキスト</p>
</dd>
</dl>


<script>
$(document).ready(function(){

$('dd:not(:first)').css('display','none');//一行目意外隠す

$('dl dt').click(function(){//クリックする

  if($('+dd',this).css('display')=='none'){//クリックされたdtのとなりのddが閉じられてたら

$('dd').slideUp('slow');//となりが無かった時にddがスライドアップ
$('+dd',this).slideDown('slow');//となりに閉じられたddがある時スライドアップ
}
});
});
</script>

</body>
</html>

結果:
f:id:game-web-design:20141007122716p:plain

解説と考え方

  • 「$('dd:not(:first)').css('display','none');」で一番最初のdd以外を隠す命令をしています。
  • 「if($('+dd',this).css('display')=='none')」で、クリックされたときのdisplayがnoneだった場合の条件分岐。
  • 「$('dd').slideUp('slow');」で展開されているddの隣(下)にdd要素が無かった場合、スライドアップ。
  • 「$('+dd',this).slideDown('slow');」で、隣(下)に閉じられたddがある場合、スライドアップして展開されます。