画面をクリックしたときに処理をする

スマートフォンでよくあるハンバーガーメニューで、「メニューを開いているときはメニュー以外の部分をクリックしたときにメニューを閉じたい」という要望がたまにあるので、実装方法をメモしておきます。

サンプルコード

今回は簡単に実装するためにアコーディオンで試してみていますが、ハンバーガーメニューの場合でも処理はそれほど変わらないと思います。

HTML

	<dl class="accordion">
		<dt>開閉ボタン</dt>
		<dd>
			<p>テストテストテスト</p>
			<p><a href="https://www.google.co.jp/">リンクテスト</a></p>
			<p>テストテストテスト</p>
		</dd>
	</dl>

JavaScript

$(function() {
	var $accSwitch = $('.accordion dt');
	var $accContents = $('.accordion dd');

	// 開閉ボタンクリック時
	$accSwitch.on('click', function(e) {
		$accContents.slideToggle();
		e.stopPropagation();
	});

	// アコーディオン内クリック時
	$accContents.on('click', function(e) {
		e.stopPropagation();
	});

	// 画面クリック時
	$(document).on('click', function() {
		// アコーディオンが開いているとき
		if($accContents.is(':visible')) {
			$accContents.slideUp();
		}
	});
});

アコーディオン部分以外をクリックしたときにアコーディオンを閉じるデモページ
アコーディオン自体はslideToggle()で開閉するだけのシンプルなものです。
画面をクリックしたときに閉じる処理は$(document).on(‘click’, function()); で実装していますが、これだけだとアコーディオン部分をクリックした時にも反応してしまうので、アコーディオン部分ではe.stopPropagation();で処理が発生しないようにしています。