Jquery - 检查选择框外的点击次数

Question

我使用以下方法重新创建了一个Select框及其下拉函数：

$(".selectBox").click(function(e) {
    if (!$("#dropDown").css("display") || $("#dropDown").css("display") == "none")
        $("#dropDown").slideDown();
    else
        $("#dropDown").slideUp();
    e.preventDefault();
});

唯一的问题是，如果您点击该框，则下拉列表会保留。我希望它能模仿常规下拉并在你点击时关闭，所以我认为我可以做一个'身体'点击：

$('body').click(function(){
    if ($("#dropdown").css("display") || $("#dropdown").css("display") != "none")
        $("#dropdown").slideUp();
});

但是现在，当您单击“选择”框时，下拉列表会向下滑动并向右滑动。我有什么想法我做错了吗？非常感谢提前...

Answer 1

您还需要停止点击里面的 #dropdown，然后再回到body，如下所示：

$(".selectBox, #dropdown").click(function(e) {
   e.stopPropagation();
});

我们正在使用event.stopPropagation()它会阻止点击冒泡，从而导致.slideUp()。此外，您可以使用:visible或.slideToggle()简化其他2个事件处理程序，如下所示：

$(".selectBox").click(function(e) {
  $("#dropDown").slideToggle();
  return false;                  //also prevents bubbling
});
$("#dropdown").click(function(e) {
   e.stopPropagation();
});
$(document).click(function(){
  $("#dropdown:visible").slideUp();
});

Answer 2

由于您要设置一个捕获每次点击的事件处理程序，因此您不需要在子项上使用另一个事件处理程序。

$(document).click(function(e) {
    if ($(e.target).closest('.selectBox').length) {
        $('#dropdown').slideToggle();
        return false;
    } else {
        $('#dropdown:visible').slideUp();
    }
});