点击按钮显示 div，当点击 div 外部时隐藏该 div。

Question

HTML

<div id="selectPeriodRangePanel">
    <p>Test</p>
</div>

<button id="period_select_range_btn">Select Range</button>

JQUERY

$("#period_select_range_btn").off().on("click", function(){
    $("#selectPeriodRangePanel").toggle();
});

当我点击按钮时，会打开“selectPeriodRangePanel” DIV。我希望在我点击DIV以外的区域时，隐藏这个DIV。

你可以怎么做？

- wawanopoulos

---

你尝试过使用.focusout()或者.blur()吗？ - Florian Humblot

你需要有一个文档点击事件处理程序，在其中执行该操作。 - Arun P Johny

@FMashiro 不是的，这是什么？ - wawanopoulos

当元素或其内部任何元素失去焦点时，将向其发送focusout事件；当元素失去焦点时，将向其发送blur事件。请在此处阅读更多信息： https://api.jquery.com/focusout/ https://api.jquery.com/blur/ - Florian Humblot

点击按钮或DIV之外时？不清楚您的期望。 - A. Wolff

Answer 1

试一下

$(document).on("click", function(e){
    if($(e.target).is("#period_select_range_btn")){
      $("#selectPeriodRangePanel").show();
    }else{
        $("#selectPeriodRangePanel").hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectPeriodRangePanel" style="display:none">
    <p>Test</p>
</div>

<button id="period_select_range_btn">Select Range</button>

- Arturo

---

应该是 if($(e.target).closest("#period_select_range_btn").length)，一个 button 元素可以包含其他元素。顺便说一下，点击事件的传播可能会被其他绑定的处理程序停止。但是加1，因为这对OP的情况有效，但不是通用的方法。 - A. Wolff

啊，好的，我现在明白了。在 jfiddle 上它是可以工作的，但我理解你所说的，也许 e.target 不是选择器中带有 id 的元素，我不确定它是否将按钮视为已点击，但最好还是预防一下。谢谢。 - kpucha

@kpucha 是的，完全正确 :) - A. Wolff

不正确，因为当我点击 #selectPeriodRangePanel 时它会消失。 - Vixed

@Vixed 但是 OP 的预期行为不清楚。你理解的方式与我理解的方式一样，但显然不是 OP 寻找的答案。他将此答案标记为正确答案。 - A. Wolff

Answer 2

您可以在文档元素上设置点击处理程序，如果点击发生在外部，您可以隐藏它。

$("#period_select_range_btn").off().on("click", function() {
  $("#selectPeriodRangePanel").toggle();
});
$(document).click(function(e) {
  if ($(e.target).closest('#selectPeriodRangePanel, #period_select_range_btn').length == 0) {
    $("#selectPeriodRangePanel").hide();
  }
})

body {
  min-height: 500px;
  background-color: lightblue;
}
#selectPeriodRangePanel {
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectPeriodRangePanel">
  <p>Test</p>
</div>

<button id="period_select_range_btn">Select Range</button>

- Arun P Johny

Answer 3

我会这样做：

尝试这个。

$(document).on("click", function(e) {
  var el = $(e.target).closest("#selectPeriodRangePanel, #period_select_range_btn").length != 0;
  $("#selectPeriodRangePanel").toggle(el);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectPeriodRangePanel" style="display:none">
  <p>Test</p>
</div>

<button id="period_select_range_btn">Select Range</button>

- Jai