javascript - 防止 div 在 slideUp() 之后显示 - jQuery

Question

我正在尝试编写一小段代码，所以当我单击问号时，它会显示另一个 div。但是，当我点击 body 时，它应该隐藏刚刚显示的 div。

我遇到的问题是，即使我在用户点击 body 时使用 .slideUp()(注意:body 只能在 ? 的高度点击)，再次点击 body 后也会显示。我如何才能使点击 body 不会再次显示 .popover？如果我在 .slideUp() 之后添加 .hide()，它只是直接隐藏它并且 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