Posted at

超初心者が受ける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

複雑なプログラムを組める人はすごいなあ、と思うのでした。

具体的な段階に入ると、脳の拒否反応が激しいので、このあたりにしようと思います。

教えてくれた方々には感謝しています。

ありがとうございました。