0

我正在做一个小测试，点击显示 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>
4

2 回答 2

0

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

$("a#trigger").click ( function() {
    $("#pop-up").toggle();
});
于 2013-01-30T07:53:48.643 回答
0

看到您正在使用 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;
}

在这个小提琴中说明

于 2013-01-30T08:01:30.547 回答