javascript - 在父元素外部单击时删除类

Question

在下面显示的 HTML 中，我想显示 input单击“ورود”后，当我在其父级外部单击时将其隐藏 <div> .

HTML

 <div id="user-login-top">ورود</div>
 <div id="user-login-wrapper" class="">visible
   <input type="text" value="name">
 </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, #user-login-top") === false) {
           $("#user-login-wrapper").removeClass("wide");
        }
    });
});

这是我的 fiddle :fiddle

Answer 1

您可以使用 jQuery closest()方法如下:

$(document).on("click", function (e) {
    if (e.target.id != "user-login-top" && !$(e.target).closest("#user-login-wrapper").length) {
        $("#user-login-wrapper").removeClass("wide");
    }
});

Updated Fiddle

---

或者如果您可以将 #user-login-top 移动到输入的父级，您可以简单地执行以下操作:

$(document).on("click", function (e) {
    if (!$(e.target).closest("#user-login-wrapper").length) 
        $("#user-login-wrapper").removeClass("wide");

});