这是因为事件的传播。
当您单击user-login-top时，第一个单击处理程序被触发，它添加类，然后由于事件传播，附加到文档的处理程序被触发，它满足if条件并删除类。
这里的一个可能的解决方案是使用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>

另一个是
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

<section>
  <div class="click-text">
    click inside and outside me
  </div>
</section>

const concernedElement = document.querySelector(".click-text");
document.addEventListener("mousedown", (event) => {
  if (concernedElement.contains(event.target)) {
    console.log("Clicked Inside");
  } else {
    console.log("Clicked Outside / Elsewhere");
  }
});