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

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

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