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

webかたつむり

ウェブデザインを勉強中

アコーディオン 再び

 手順の整理

  1. 1番先頭、以外のddは閉じる(hide)
  2. dtがクリックされたら
  3. クリックされた隣のddが閉じているならば
  4. すべてのddを閉じて
  5. クリックされた隣のddを開く 
  • 以上の5段階。
  • さらに、開いているddの上にあるdtの色を変える。
  • addClass, removeClassでcssを書き換える。(classの名前は.open にする。) 
  1. 1番先頭、以外のddは閉じる(hide)先頭のdtの背景を変える、addClass
  2. dtがクリックされたら 先頭のdtの背景を戻す、removeClass
  3. クリックされた隣のddが閉じているならば
  4. すべてのddを閉じて
  5. クリックされた隣のddを開く、addClass

</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
$('dd:not(:first)').hide();
$('dt:first').addClass('open');
$('dt').on('click', function(){
if($(this).next('dd').css('display')=='none'){
$('dt').removeClass('open');
$(this).addClass('open');
$('dd').slideUp();
$(this).next('dd').slideDown();
};
});
});
</script>

  •  adClass() の括弧の中は、クラス名を文字列として入力。('.class') ではなく  ('class')
  • クリックしたdt を最初に反応させようとして、つまり押した部分の色が先に変わるように$('dt').removeClass('open');と、$(this).addClass('open');を逆にしてはいけない。addClassが全て上書きされるから。
  • クリックのあとに起きる4つの動作は、順番によってぎこちなさの度合いが違う。
  • 実験してみると、色の変化をまとめて先に書いたほうがなめらかに感じた。

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

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

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