Question

我正在进行一些测试，点击显示iframe的图片。然后我想点击那个图像（#container div）的任何地方。我可以让iframe弹出，但是当我点击主div（#container）时我无法隐藏它。

   <html>
   <head>
   <script type="text/javascript"    src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
   <script>
$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').click(function(e) {
    $('div#pop-up').show();
      //.css('top', e.pageY + moveDown)
      //.css('left', e.pageX + moveLeft)
      //.appendTo('body');
  }, function() {
    $('#container').click(function(){
    $('div#pop-up').hide();
    });

  $('a#trigger').mousemove(function(e) {
    $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

   });</script>
       <style>
    h1{
    margin: 0;
    padding: 0;
    font-weight: normal;
    }
    div#container {
    width: 580px;
    margin: 15px auto 0 auto;
    padding: 20px;
    background: #000;
    border: 1px solid #1a1a1a;
    }
   /* HOVER STYLES */
   div#pop-up {
   display: none;
   position: absolute;
   /*width: 150px;
   padding: 150px;*/
   background: #eeeeee;
   color: #000000;
   border: 1px solid #1a1a1a;
   font-size: 90%;
  }
    </style>

   </head>
   <body>
<div id="container">
    <h1>Pop-out Example - pop out div on hover</h1>
    <p>
        <a href = "#" id="trigger"><img src="router.png"/></a>
    </p>
</div>
<div id="pop-up">
    <p>
        <iframe width="500px" height="350px" align= "top-left" src="http://127.0.0.1:667"></iframe>
    </p>
</div>
    </body>
    </html>

Answer 1

您可以使用.toggle() jQuery，但我认为它已被弃用。

$("a#trigger").click ( function() {
    $("#pop-up").toggle();
});

Answer 2

看到您正在使用jQuery，您可以执行以下操作。 javascript指示如果在隐藏target div的任何位置单击文档。但是，如果点击位于元素target的边界内，则hide()停止stopPropagation()

<强>的Javascript

$(document).click(function() {
    $('#target').hide();
});
$("#target").click(function(e) {
    e.stopPropagation();
});

<强> HTML

<div id="target">Test</div>

<强> CSS

#target {
  width: 50px;
  height: 50px;
  background-color: red;
}

此fiddle

中有说明

点击图片，点击关闭页面jquery（）

2 个答案: