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().您的其他2个事件处理程序也可以简化为:visible或者.slideToggle()像这样整体:

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