在div区域外单击时关闭div

Question

我有这段代码.我正在尝试关闭div,当在Div之外点击时,我已经搜索了这个论坛但找不到解决方案 - 这是一个小提琴 - 演示

$('#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%.该frame宽度是一样的边框.

$('#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>