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

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

Answer 1

嗯，除了user-login-wrapper中包含的文本框外，你已经为所有目标设置了逻辑，所以只需用逻辑添加它就可以了。

示例：

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

Demo Fiddle

Answer 2

您可以使用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");

});