Question

我试图制作一小段代码，所以当我点击问号时，它会显示另一个div。但是，当我点击body时，它应隐藏刚刚显示的div。

我遇到的问题是，即使我在点击.slideUp()时使用body（注意：body只能点击?的高度{1}}），再次点击body后也会显示。如何点击body再次显示.popover？如果我在.hide()之后添加.slideUp()，则会直接隐藏它并且slideUp效果消失。

CodePen

HTML

<div class="center">
  <span class="qs">? <span class="popover above">Voeg toe aan wensenlijst</span></span>
</div>

CSS

body {
  background-color: #e3fbff;
}
/* Just to center things */
.center {
  margin: 100px auto;
  width: 30px;
}

/* The element to click on */
.qs {
  background-color: #02bdda;
  border-radius: 16px;
  color: #e3fbff;
  cursor: default;
  display: inline-block;
  font-family: 'Helvetica',sans-serif;
  font-size: 18px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  position: relative;
  text-align: center;
  width: 30px;

  .popover {
    background-color: rgba(0,0,0,0.85);
    border-radius: 5px;
    top: 42px;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    color: #fff;
    font-size: 12px;
    display:none;
    font-family: 'Helvetica',sans-serif;
    left: -95px;
    padding: 7px 10px;
    position: absolute;
    width: 200px;
    z-index: 4;
  }
}

的jQuery

$(".qs").click(function(){
  $(".popover ").slideToggle();
});

$('body').click(function() {
    // Hide all hidden content
    $('.popover').slideUp();
});

$('.popover').click(function(e) { e.stopPropagation() });

$('.qs').click(function(e) {
    // this stops the event from then being caught by the body click binding
    e.stopPropagation();
});

Answer 1

单击时隐藏工具提示（如果可见）。您不需要更多代码：

var popover = $('.popover');
var qs = $('.qs');

qs.click(function(e){
  e.stopPropagation();
  popover.slideToggle();
});

$('html').click(function() {
   if(popover.is(':visible')) {
     popover.slideUp();
   }
});

$('.popover').click(function(e) { e.stopPropagation() });

Codepen

Answer 2

您可以查看.popover是否可见：

$('body').click(function() {
  // Hide all hidden content
  if($('.popover').is(":visible"))
    $('.popover').slideUp();
});

此外，您不需要同时使用slideup()和hide()。

codepen

Answer 3

您需要确保弹出窗口没有点击，您可以像这样进行检查

 var mouse_is_inside = false;

 $('.popover').hover(function() {
        mouse_is_inside=true;
 }, function() {
        mouse_is_inside=false;
 });

 $("body").live('mouseup', function() {
       if(! mouse_is_inside)
           $('.popover').slideUp();
 });

在slideUp（） - jQuery之后阻止div显示

3 个答案: