jQueryにて、クリックイベントで出現させた要素を、再びクリックして要素を消す。
しかし、同じ要素ではなく、サイト上どこをクリックしてもその要素を消せる。
いわゆる 領域外クリック 、というやつですね。
今回はこれを紹介します。
実体験
サイトを模写していて手詰まった部分です。
虫眼鏡のアイコンをクリックすると、検索フォームがフェードインで出現します。
その検索フォームは、サイト上のどこをクリックしても、フェードアウトで消すことができる仕組みでした。
この実装に一苦労しました。
サンプルコード
jsファイルに下記のコードを記述して解決です。
ID名は、わかりやすいように日本語にしてあります。
そして、後ほどの解説のために、コードの各行の頭に《数字》を降ってあります。(実際のコードの記述には関係ありません)
《1》$(document).on('click', function(e) {
《2》if(!$(e.target).closest('#出現させる要素').length && !$(e.target).closest('#ボタンやアイコン').length){
《3》$('#出現させた要素').fadeOut();
《4》}else if($(e.target).closest('#ボタンやアイコン').length){
《5》if($('#出現させる要素').is(':hidden')){
$('#出現させる要素').fadeIn();
《6》}else{
$('#pop_up').fadeOut();
}
}
});
解説
※#ボタンやアイコンをクリックして、#出現させる/させた要素をフェードイン/アウトさせる、設定としています。
《1》クリックイベントを設定【.on('click', function(e)】
《2》クリックした場所を、lengthを使って判別します。
クリックした場所が#出現要素でもなく(&&)、#ボタン/アイコンでもなければ(「!」で否定します)、
《3》#出現させた要素をフェードアウトさせます。
《4》別条件→クリックした場所が#ボタン/アイコンの場合、
《5》#出現要素が隠れているのなら(':hidden')、フェードイン。
《6》そうでないのなら(出現しているなら)フェードアウト。
と言う意味合いですね。
今回はこちらのサイトを参考にさせていただきました。とてもわかりやすいですので参考にしてみてください。
https://to-benefit7.com/outofrange-popup-close/
セレクタ関連の記事も紹介しておきますね↓
-
-
【jQuery】対象要素(セレクタ) を2つ指定したいときの記述
続きを見る