超初心者が受けるJS社内勉強会：第5回6回

続：実践

よくあるアコーディオンの処理について実践。

アコーディオン

$(function(){  //ブラウザに読み込まれたとき
    'use strict';  //エラー出力をするモードの宣言

    $('.acc_button').on('click', function(){ //クリックした時

    //console.log('Hello, world!');
    //$contentという変数にクリックされたものの要素に代入する

    var $contents = $(this).closest('.js-accordion').find('.acc_contents');

    if($contents.is(':animated')){ //$contentがアニメーション中だったら{}を実行

        return false; //何もせずに処理を終了する
    }
    $contents.slideToggle(); //dd要素が表示されているときは閉じ、表示されていないときは閉じる
    $(this).toggleClass('open');  //クリックされた要素にopenクラスがついていれば削除。ついていなければ追加。
    });
});

$(this)

• イベントが発生（クリックした）した要素をさしている

.closest(selector)

1. クリックしたとき
2. その親要素をみる
3. 子要素の中で、開く箇所をさがす
4. スライドを開閉する

連打して開閉を続けてしまう場合の処理

• アニメーション中は何もしない、という命令を書き足す

return false;

• functionを終了する。
• falseを返す。
• 以降の処理を実行しない。
  ※if()の中身がtrueの場合に実行される。

:animated

• アニメーションtrue、してないときはfalse

複雑なプログラムを組める人はすごいなあ、と思うのでした。
具体的な段階に入ると、脳の拒否反応が激しいので、このあたりにしようと思います。

教えてくれた方々には感謝しています。
ありがとうございました。