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");
        }
    });
});

这里是小提琴：Fiddle

感谢您的帮助！？ THX

Answer 1

这是因为事件的传播。

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

此处一种可能的解决方案是使用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>

单击div外部后删除类

1 个答案: