How to hide the dropdown menu by clicking outside in jquery?

Question

I want to hide the dropdown menu when clicking outside the dropdown menu. I tried the below code but it is not hiding from outside click.

$(".profile__dropdown>a").click(function (e) {
      e.preventDefault();
      e.stopPropagation();
      $(this).parent("li.has-dropdown").find('.profile__collapsein').toggle();
      $(this).parent("li.has-dropdown").toggleClass("my");
      $(this).find("i").toggleClass("down up");
    });
    
    $(".profile__dropdown>a").click(function (e) {
      e.preventDefault();
      e.stopPropagation();
      $(".active-parent-link").removeClass("active-parent-link");
      $(".active-page-link").removeClass("active-page-link");
      $(this).parent().addClass("active-parent-link");
      $(this).parent().addClass("active-link");
    });

I have added my html code below

<li class="profile__dropdown has-dropdown">
        <a>
          <div class="profile__list">
            <img src="img"/>

            <span class="navList__subheading-title">
              <a href="javascript:void(0)" *ngIf="agreedSaved" class="username">{{NewUserName}}</a>
              <i class="down"></i>
            </span>
          </div>
        </a>

        <ul class="profile__collapsein">
          
          <li class="profile__sublist">
            <a href="javascript:void(0)" class="setting" (click)="showWelcome()">{{userSettingsMenu | TextByLanguage:welcomePopup:userSettingsHeaderCode:selectedLanguageCode}}</a>
          </li>
          

        </ul>
      </li>