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 class="header-disableProfileIcon" />

Answer 1

$(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();
  });
});