只有在已经可见的情况下，才隐藏主体单击上的弹出窗口

Question

点击时隐藏div（例如#popover）很容易：

$(document).ready(function() {
    $("#trigger").click(function(e) {
        $("#popover").toggle();
        e.stopPropagation();
    });
    $(document).click(function(e) {
        if (!$(e.target).is('#popover, #popover *')) {
            $("#popover").hide();
        }
    });
});

但是，这个函数不是每次用户使用click时都会触发吗？（这对我来说毫无意义）。我可以以某种方式将此函数限制为仅在#popover已经可见的情况下激发吗？

Answer 1

在这种情况下，每次显示#example时都可以尝试使用$(document).one(function(e) {...});。

$(document).ready(function() {
    var didBindToBody = false;
    function closePopOverOnBodyClick() {
      didBindToBody = true;
      $(document).one('click', function(e) {             
          if (!$(e.target).is('#popover, #popover *')) {
              $("#popover").hide();
          }
          else {
              closePopOverOnBodyClick();
          }
          didBindToBody = false;
      });
    }
    $("#trigger").click(function(e) {
        $("#popover").toggle();
        e.stopPropagation();
        if (!didBindToBody && $("#popover").is(":visible")) {
            closePopOverOnBodyClick();
        }  
    });
    closePopOverOnBodyClick();
});

DEMO

Answer 2

您可以尝试类似的东西

$(document).click(function(e) {
    if (!$('#example').is(":visible")) {
        return false;
    } else if (!$(e.target).is('#popover, .login-panel *')) {
        $("#popover").hide();
    }
});

或者你可以把这两个条件句合并为一个，只是想我应该把它分开，以便于阅读，并使我的建议更容易被发现。