アコーディオン - Webデザインを学ぶ

f:id:hourin-g0913:20160319001653p:plain
アコーディオンメニューとはマウスが乗る、またはクリックをすると閉じたり開いたりするメニューバーのこと。イベントが起これば表示される仕組みなので、余計なスペースを取らない。dl,dt,dd要素を使って書く。

①jQueryの命令を書くところをつくる。

$(document).ready( function(){
});

②ddの先頭以外を選択して、非表示をする。
先頭を表示しておくことで、アコーディオンメニューであると認識させる。

$(document).ready( function(){
 $('dd:not(:first)').css('display','none');
});

③if文を使って条件分岐の記述をする。
$('+dd',this)はクリックされたdtの次に登場するddのことを指している。
if文の条件を日本語に置き換えてみる↓
dtがクリックされ、もしそのクリックされたdtがdisplay:none(非表示)であればーー

$(document).ready( function(){
 $('dd:not(:first)').css('display','none');
 $('dl>dt').click( function(){
   if($('+dt',this).css('display')=='none'){

   }
 })
});

④if分の条件が成り立っているときの命令を書く。
if文の命令を日本語に置き換えてみる↓
すべてのddを非表示にし、押されたdtの隣にあるddを表示する。

$(document).ready( function(){
 $('dd:not(:first)').css('display','none');
 $('dl>dt').click( function(){
   if($('+dd',this).css('display')=='none'){
      $('dd').slideUp('sloew');
      $('+dd',this).slideDown('slow');
   }
 })
});

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready( function(){
 $('dd:not(:first)').css('display','none');
 $('dl>dt').click( function(){
   if($('+dd',this).css('display')=='none'){
      $('dd').slideUp('sloew');
      $('+dd',this).slideDown('slow');
   s}
 })
});
</script>
<style>
html,body,dl,dd,dt{
margin: 0;
padding: 0;
}
dl{
 width: 400px;
 margin: 50px auto;
}
dl dt{
 padding: 5px;
 background: #7CADB6;
 border:1px solid #7CADB6;
 cursor: pointer;
}
dl dd{
border: 1px solid #7CADB6;
border-top: none;
height: 220px;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="container">
<dl>
<dt>Item1</dt>
<dd>Item1 content<br>テキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストA</dd>
<dt>Item2</dt>
<dd>Item2 content<br>テキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストB</dd>
<dt>Item3</dt>
<dd>Item3 content<br>テキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストC</dd>
</dl>
</div><!--container-->
</body>
</html>