单击div外部后删除类

Question

我知道这是一个老问题,但我搜索了很多.我想在类似的身体外面点击后删除课程.这是我的代码:
Html

   <div id="user-login-top">Enter</div>
   <div id="user-login-wrapper" class="">visible</div>

jQuery的

$(function () {
    $("#user-login-top").on("click", function () {
        $("#user-login-wrapper").addClass("wide");
    });
    $(document).on("click", function (e) {
        if ($(e.target).is("#user-login-wrapper") === false) {
            $("#user-login-wrapper").removeClass("wide");
        }
    });
});

这是小提琴:小提琴

感谢您的帮助 !？
谢谢

Answer 1

这是因为事件的传播.

单击时user-login-top,将触发第一个单击句柄,即添加类,然后由于事件传播,附加到文档的处理程序将在满足if条件的情况下触发并删除该类.

这里一个可能的解决方案是使用event.stopPropagation()

$(function() {
  $("#user-login-top").on("click", function(e) {
    $("#user-login-wrapper").addClass("wide");
    e.stopPropagation()
  });
  $(document).on("click", function(e) {
    if ($(e.target).is("#user-login-wrapper") === false) {
      $("#user-login-wrapper").removeClass("wide");
    }
  });
});

#user-login-wrapper {
  opacity: 0;
}
#user-login-wrapper.wide {
  opacity: 1 !important;
}

<div id="user-login-top">????</div>
<div id="user-login-wrapper" class="">visible</div>

另一个是

$(function() {
  $("#user-login-top").on("click", function(e) {
    $("#user-login-wrapper").toggleClass("wide");
  });
  $(document).on("click", function(e) {
    if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
      $("#user-login-wrapper").removeClass("wide");
    }
  });
});

#user-login-wrapper {
  opacity: 0;
}
#user-login-wrapper.wide {
  opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="user-login-top">????</div>
<div id="user-login-wrapper" class="">visible</div>