我一直在研究一个功能，允许一个子菜单打开时，点击个人资料的形象。所需的行为是，当我单击配置文件图像时，子菜单应该打开，并且open-menu类应该添加到其中。此外，当我在子菜单框外单击时，子菜单应该关闭，删除open-menu类。
我已经实现了这个功能的代码，但是我遇到了一个问题，一开始不能点击配置文件图像。在框外第一次单击后，子菜单会完美地打开和关闭，但我似乎无法单击配置文件图像本身来触发子菜单。
我已经尽我所能，我可能需要帮助，提前感谢！

let subMenu = document.getElementById("subMenu");

function toggleMenu(open) {
  if (open) {
    subMenu.classList.add("open-menu");
  } else {
    subMenu.classList.remove("open-menu");
  }
}

function isClickedInsideSubMenu(clickedElement) {
  return subMenu.contains(clickedElement);
}

function handleProfileClick() {
  if (subMenu.classList.contains("open-menu")) {
    // Submenu is already open, so we close it
    toggleMenu(false);
  } else {
    // Submenu is not open, so we open it
    toggleMenu(true);
  }
}

document.addEventListener("click", function(event) {
  const clickedElement = event.target;
  const isInsideSubMenu = isClickedInsideSubMenu(clickedElement);

  if (!isInsideSubMenu && subMenu.classList.contains("open-menu")) {
    toggleMenu(false);
  }
});

/* popup profile submenu */

.sub-menu-wrap {
  position: absolute;
  top: 70%;
  right: 10px;
  width: 0;
  max-height: 0;
  transition: var(--tran-02);
  overflow: hidden;
}

.sub-menu-wrap.open-menu {
  max-height: 400px;
  width: 320px;
}

.sub-menu {
  background-color: var(--bg-1);
  padding: 10px;
  margin: 10px;
  border-radius: var(--std-radius);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 10px;
}

.user-box {
  background-color: var(--bg-1);
  border-radius: 15px;
  padding: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.user-info p1 {
  position: relative;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-1);
  margin: 0;
}

.user-info p2 {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  margin: 0;
  text-transform: lowercase;
}

.user-info img {
  width: 45px;
  border-radius: 50%;
  margin-right: 15px;
}

.sub-menu hr {
  border: 0;
  height: 1px;
  width: 100%;
  background: var(--color_Light3);
  margin: 10px 0 10px;
}

.sub-menu-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-1);
  margin: 10px 0;
  padding: 10px;
}

.sub-menu-link p {
  width: 100%;
  margin: 0;
}

.see-profile {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-1);
  padding: 10px;
}

.see-profile p {
  width: 100%;
  margin: 0;
}

.sub-menu-link i {
  width: 40px;
  border-radius: 50%;
  background-color: var(--color_Light1);
  padding: 8px;
  margin-right: 10px;
}

.sub-menu-link span {
  font-size: 22px;
  transition: transform 0.5s;
}

.sub-menu-link:hover,
.see-profile:hover,
.user-info:hover {
  background-color: var(--color_White);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  border-radius: 10px;
}

<div class="divider"></div>
<img src="../img/profile.jpg" alt="Profile Picture" onclick="handleProfileClick()" />

<div class="sub-menu-wrap" id="subMenu">
  <div class="sub-menu">
    <div class="user-box">
      <div class="user-info">
        <img src="../img/profile.jpg" alt="Sub Profile Picture" />
        <div class="h3-wrapper">
          <p1 class="user">Arian Checa</p1>
          <p2 class="position">administrator</p2>
        </div>
      </div>
      <hr>
      <a href="#" class="see-profile">
        <p>See Profile</p>
      </a>
    </div>
    <a href="#" class="sub-menu-link">
      <i class='bx bx-cog'></i>
      <p>Settings</p>
      <span>></span>
    </a>
    <a href="../auth/logout.php" class="sub-menu-link" id="logout-link">
      <i class='bx bx-log-out'></i>
      <p>Logout</p>
      <span>></span>
    </a>
  </div>
</div>

下面是子菜单框enter image description here的照片