Kaldır sınıf div

Question

dışında tıklamadan sonra bu eski bir soru olduğunu biliyorum, ama bir sürü aradık. i gibi vücut dışında tıklandığında sonra sınıfını kaldırmak istiyorum. İşte benim kodudur:
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"); 
     } 
    }); 
}); 

ve burada keman olduğunu: Fiddle

yardımına takdir!?
Thx

Answer 1

Bu olay nedeniyle yayılma taşımaktadır.

user-login-top'a tıkladığınızda, ilk ekleme tutamacı, sınıfı ekleyen tetiklenir; daha sonra, olay yayılımı nedeniyle, belgeye eklenen işleyici, koşulun yerine getirildiği ve sınıfı kaldıracağı yerde tetiklenir. Burada

Olası bir çözüm Başka

$(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>

012 olduğunu 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>

---

kullanmaktır