web-dev-qa-db-ja.com

divの外側をクリックした後にクラスを削除する

私はこれが古い質問であることを知っていますが、私はたくさん検索しました。 like bodyの外側をクリックした後にクラスを削除したい。これが私のコードです：
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

あなたの助けに感謝 ！？
どうも

javascriptjqueryhtmljquery-ui
11
user3856699

イベントの伝播によるものです。

user-login-topをクリックすると、最初のクリックハンドルがトリガーされ、クラスが追加されます。次に、イベントの伝播により、ドキュメントに添付されているハンドラーがトリガーされ、if条件を満たし、クラスが削除されます。

ここで考えられる解決策の1つは、 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>
21
Arun P Johny