博客

当用户点击它的外部时如何用jQuery隐藏一个div

  • Post category:jquery

当用户点击某个元素的外部时，可以使用jQuery来隐藏一个指定的div元素。具体的攻略如下：

  1. 给要隐藏的div元素添加一个唯一的id标识符，在页面加载时隐藏该元素
<div id="mydiv" style="display:none;">
  这是要隐藏的内容
</div>
  1. 使用jQuery的事件绑定方法（如click()）来监听用户的点击事件，并判断点击的位置是否在指定元素的外部
$(document).click(function(event) {
  if (!$(event.target).closest('#mydiv').length) {
    $('#mydiv').hide();
  }
});

在上面的代码中，我们使用了document作为事件的监听器，并在点击事件发生时判断点击的目标元素是否是#mydiv或者它的子元素。如果不是，则隐藏该元素。

示例1：点击页面任何位置都可以隐藏div

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例1</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="mydiv" style="background-color: lightkyblue; padding: 10px;">
    <h3>点击页面其他位置可以隐藏本div</h3>
    <p>这里是要隐藏的内容</p>
  </div>
  <script>
    $(document).click(function(event) {
      if (!$(event.target).closest('#mydiv').length) {
        $('#mydiv').hide();
      }
    });
  </script>
</body>
</html>

示例2：点击按钮可以显示/隐藏div

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例2</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="toggleBtn">显示/隐藏</button>
  <div id="mydiv" style="background-color: lightkyblue; padding: 10px;">
    <h3>点击按钮可以显示/隐藏本div</h3>
    <p>这里是要隐藏的内容</p>
  </div>
  <script>
    $('#toggleBtn').click(function() {
      $('#mydiv').toggle();
    });
    $(document).click(function(event) {
      if (!$(event.target).closest('#mydiv').length && !$(event.target).is('#toggleBtn')) {
        $('#mydiv').hide();
      }
    });
  </script>
</body>
</html>

在上面的代码中，我们添加了一个按钮，用户可以点击该按钮来显示/隐藏#mydiv元素。我们还修改了事件绑定代码以允许点击按钮时不隐藏#mydiv元素。

Tags: