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

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

$(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();
    }
});

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

仅在已经可见时才隐藏身体上的弹出窗口

2 个答案: