jQueryでユーザーが外部をクリックした時にDIVを非表示にする方法

2024-04-02

jQueryを使ってユーザーが外部をクリックした時にDIVを非表示にする方法

手順

HTMLファイルに以下のコードを追加します。

<div id="my-div">
  これは非表示にしたいDIVです。
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  // "my-div" 以外をクリックした時に "my-div" を非表示にする
  $(document).click(function(event) {
    if (!$(event.target).closest('#my-div').length) {
      $('#my-div').hide();
    }
  });
});
</script>

コード解説

$(document).ready(function() { ... });: DOMContentLoadedイベントが発生した時に実行されるコードを記述します。
event.target: クリックされた要素を取得します。
$(event.target).closest('#my-div').length: クリックされた要素が #my-div 以下の要素かどうかを判定します。
$('#my-div').hide();: #my-div を非表示にします。

補足

上記のコードは、#my-div 以外をクリックした時に #my-div を非表示にする例です。
クリックした要素以外をクリックした時に別の要素を非表示にする場合、#my-div を他の要素セレクタに置き換えてください。
hide() メソッド以外にも、fadeOut() メソッドなどを使って、非表示にする際のアニメーションを設定できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQueryでDIVを非表示にする</title>
</head>
<body>
  <div id="my-div">
    これは非表示にしたいDIVです。
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script>
  $(document).ready(function() {
    // "my-div" 以外をクリックした時に "my-div" を非表示にする
    $(document).click(function(event) {
      if (!$(event.target).closest('#my-div').length) {
        $('#my-div').hide();
      }
    });
  });
  </script>
</body>
</html>

説明

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでHTMLファイルを開きます。
"my-div" をクリックします。

jQueryでDIVを非表示にする他の方法

toggle() メソッドは、要素の表示状態を切り替えます。要素が表示されている場合は非表示になり、非表示の場合は表示されます。

<div id="my-div">
  これは非表示にしたいDIVです。
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  // "my-div" をクリックした時に "my-div" の表示状態を切り替える
  $('#my-div').click(function() {
    $(this).toggle();
  });
});
</script>

slideToggle() メソッドは、要素をスライドさせて表示/非表示を切り替えます。

<div id="my-div">
  これは非表示にしたいDIVです。
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  // "my-div" をクリックした時に "my-div" をスライドさせて表示/非表示を切り替える
  $('#my-div').click(function() {
    $(this).slideToggle();
  });
});
</script>

fadeOut() メソッドは、要素をフェードアウトさせて非表示にします。

<div id="my-div">
  これは非表示にしたいDIVです。
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  // "my-div" をクリックした時に "my-div" をフェードアウトさせて非表示にする
  $('#my-div').click(function() {
    $(this).fadeOut();
  });
});
</script>