手順の整理
- 1番先頭、以外のddは閉じる(hide)
- dtがクリックされたら
- クリックされた隣のddが閉じているならば
- すべてのddを閉じて
- クリックされた隣のddを開く
- 以上の5段階。
- さらに、開いているddの上にあるdtの色を変える。
- addClass, removeClassでcssを書き換える。(classの名前は.open にする。)
- 1番先頭、以外のddは閉じる(hide)先頭のdtの背景を変える、addClass
- dtがクリックされたら 先頭のdtの背景を戻す、removeClass
- クリックされた隣のddが閉じているならば
- すべてのddを閉じて
- クリックされた隣の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つの動作は、順番によってぎこちなさの度合いが違う。
- 実験してみると、色の変化をまとめて先に書いたほうがなめらかに感じた。