jquery - 在 div 区域外单击时关闭 div

Question

我有这段代码。我试图关闭 div，当在 Div 外部单击时，我已经搜索过这个论坛但找不到解决方案 -Here is a fiddle- Demo

$('#hideshow1').on("click", function() {
    var text = $(this).val();
    $("#req").toggle();

});

$(window).on("click keydown", function(e) {
  //e.preventDefault() /*For the Esc Key*/
  if (e.keyCode === 27 || !$(e.target).is(function() {return $("#req, #hideshow1")})) {
    $("#req").hide()
  }
}).focus()

Answer 1

Div req 宽度为屏幕的 100%。 框架宽度与边框相同。

$('#hideshow1').on("click", function() {
  if ($("#frame").is(":visible") == false) {
    $("#frame").show();
  }
  $('#hideshow1').text("Click outside div to hide it.");
});
$(document).mouseup(function(e) {
  var container = $("#frame"); //Used frame id because div(req) width is not the same as the frame 
  if ($("#frame").is(":visible")) {
    if (!container.is(e.target) //check if the target of the click isn't the container...
      && container.has(e.target).length === 0) {
      container.hide();
      $('#hideshow1').text("Click to see div");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="clickme">
  <a class="req_pic_link" id="hideshow1">Click outside div to hide it.</a>
</div>
<div id="req">
  <iframe id="frame" src="https://www.google.com"></iframe>
</div>