クリックイベントで表示させた要素を領域外クリックで非表示にする方法

クリックイベントで出現させた要素を、再びクリックして要素を消したい！

というご要望にお答えします。

ポイントは、出現した要素をクリックして非表示するのではなく、サイト上どこをクリックしてもその要素を消せる。

いわゆる　領域外クリック　というやつですね。

今回はこれを紹介します。

サンプルコード

水色のボックスをクリックすると、下に緑のボックスが表示されます。

表示された緑のボックス以外、どこをクリックしても非表示になります。

See the Pen
Untitled by t.h (@tomtom15)
on CodePen.

jQueryの解説

id名は、わかりやすいように日本語にしてあります。

もちろんclass名に変えても問題ありません。

※#ボタンやアイコンをクリックして、#出現させる/させた要素をフェードイン/アウトさせる、設定としています。

《１》$(document).on('click', function(e) {
《２》if(!$(e.target).closest('#出現させる要素').length && !$(e.target).closest('#ボタンやアイコン').length){
《３》$('#出現させた要素').fadeOut();
《４》}else if($(e.target).closest('#ボタンやアイコン').length){
《５》if($('#出現させる要素').is(':hidden')){
$('#出現させる要素').fadeIn();
《６》}else{
$('#出現させた要素').fadeOut();
}
}
});

《１》クリックイベントを設定【.on('click', function(e)】

《２》クリックした場所を、lengthを使って判別します。

クリックした場所が#出現要素でもなく（&&）、#ボタン/アイコンでもなければ(「！」で否定します)、

《３》#出現させた要素をフェードアウトさせます。

《４》別条件→クリックした場所が#ボタン/アイコンの場合、

《５》#出現要素が隠れているのなら（':hidden')、フェードイン。

《６》そうでないのなら（出現しているなら）フェードアウト。

と言う意味合いですね。

まとめ

いかがでしたでしょうか。

モーダル、検索窓、いろいろ応用できるのでぜひお試しください。

今回はこちらのサイトを参考にさせていただきました。とてもわかりやすいですので参考にしてみてください。

https://to-benefit7.com/outofrange-popup-close/

セレクタ関連の記事も紹介しておきますね↓