webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

jQuery アコーディオン

Definition Listをつくる。

  • CSSを使って、形を整える。
  • dtのfont-weightを太くする。
  • ddには、適当な高さを設定しておく。

<dl>
<dt id="menuA">menu A</dt><dd>ここにメニューAの内容が入ります。</dd>
<dt id="menuB">menu B</dt><dd>ここにメニューBの内容が入ります。</dd>
<dt id="menuC">menu C</dt><dd>ここにメニューCの内容が入ります。</dd>
</dl>

f:id:ohta-felica:20160519204259j:plain 

手始めに、menuAのddを畳んでみる。

  • dtをクリックした時に、を記述してみる。
  • $(function(){});
  • $('dt:first').on('click', function(){} );
  • $('dt:first').sildeUp();
  • まずは下の2つを合体して、$('dt:first').on('click', function(){$('dt:first').sildeUp();} );
  • それから、最初のと合体すると、
  • $(function(){$('dt:first').on('click', function(){$('dd:first').slideUp();} );});

初期設定する

  • menu Aのddだけが開いた状態にしておく。
  • 「1番目のddだけ開いている=1番目以外を、.hide」
  • $('dd:not(:first)').hide();

そして、とりかかる

  • 「dt がクリックされたら、functionする」
  • $('dt').on('click',function(){});
  • 「もし、クリックされたdtの隣にあるddが見えてなければ」
  • if($('+dd', this).css('display')=='none'){};
  • 「いま見えているddをslideUpして」
  • $('dd:visible').slideUp();
  • 「クリックされたdtの隣にあるddをslideDownする。」
  • $('+dd', this).slideDown();
  • さぁ、まとめよう!

$(function(){
$('dd:not(:first)').hide();
$('dt').on('click',function(){
if($('+dd', this).css('display')=='none'){
$('dd:visible').slideUp();
$('+dd', this).slideDown();

};

});

});

  • ふぅ~、骨のある短文だ。

<body>
<dl>
<dt>menu A</dt><dd>ここにメニューAの内容が入ります。</dd></div>
<dt>menu B</dt><dd>ここにメニューBの内容が入ります。</dd></div>
<dt>menu C</dt><dd>ここにメニューCの内容が入ります。</dd></div>
</dl>
</div>
<script>
$(function(){
$('dd:not(:first)').hide();
$('dt').on('click', function(){
if($('+dd', this).css('display')=='none'){
$('dd:visible').slideUp();
$('+dd', this).slideDown();
};
});
});
</script>
</body>