Jquery работает только по двойному клику

Question

Я хочу показать скрыть div на клике. проблема в том, что когда я нажимаю на img, открывается div и после щелчка снаружи никуда не исчезает. но после этого только по двойному клику, div открывается не по одному клику. Пожалуйста, любой может проверить и сообщить мне точную причину этой проблемы.

$(document).ready(function() {
  $(document).click(function(e) {

    e.preventDefault();

    if( !$(e.target).hasClass("header-disableProfileIcon") && $(e.target).parents(".header-user-profile-menu").length === 0 ) 
    {
      $(".header-user-profile-menu").hide();
      $(".header-disableProfileIcon").removeClass("header-enableProfileIcon");
      $(".header-disableProfileIcon").off("dblclick");
    }

    e.stopPropagation();
  });
});

html код: -

<ul class="header-user-profile-menu" id="clickoutsidehide">
    <li>
        <p class="header-profile-pointer"></p>
    </li>
    <li>
        <p class="header-username-txt">{{ loggedInUserName }}</p>
        <p class="header-secondary-text">{{ loggedInUserEmail }}</p>
    </li>
    <li class="header-logout-btn ">
        <button class="hb-btn-transparent" (click)="_logoutClickHandler()">LOGOUT</button>
    </li>
</ul>

img при нажатии: -

<img class="header-disableProfileIcon" />