Javascript jQuery下拉菜单在单击并按住时关闭

我有一个难题：

---

我有一个动画菜单，在

上有一个过渡效果，这是你的.focusout函数，如果你不打算使用标准CSS，那么你需要在移除显示菜单的类之前检查鼠标的位置。如果我是你，我会考虑使用事实上的标准，只在鼠标悬停时显示菜单，而不让用户点击查看菜单。你说，当你点击链接时，你进入页面，但菜单关闭。如果您正在加载一个新页面，当整个页面被重新绘制时，此菜单将恢复为默认状态。如果您正在捕获链接，并且希望菜单在单击时保持打开状态，那么您可能应该将其关闭在mouseout上（这是预期行为。）@AdamH我完全同意您的看法。悬停是最好的方式，但这次客户端希望菜单在单击功能上出现和重新出现：'）@Will是的，我尝试了mouseout，效果很好，但客户端希望菜单在单击时出现。我最大的问题是，如果用户单击菜单但没有“松开”，它仍然会触发focusout，并且当用户仍保持单击时，菜单消失。我试图
触发（“焦点”），使其获得焦点，但没有效果。我将尝试在ul中使用
标签，然后关注悬停。也许会work@ChronicLogic如果需要实现单击方法，则有2个选项；1） 单击页面的另一部分时关闭菜单，该部分不是您的“打开”按钮或菜单中的项目。2） 更新focusout函数，检查鼠标坐标，确保鼠标在关闭前不在菜单上方。@AdamH-hmmm我来试一试！
<div class="header__user">
    <a href="" class="header__user__company">Name of Company</a>
    <div class="user__nav">
       <ul>
          <li>
             <a href="/something1">Something1</a>
          </li>
          <li>
             <a href="/something2">Something2</a>
          </li>
          <li>
             <a href="/something3">Something3</a>
          </li>
       </ul>
    </div>
</div>

.header__user .user__nav {
    position: absolute;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s;
}

.profile-transition {
    max-height: 170px;
}

// on click expand/collapse profile menu in header

$(".header__user__company").click(function(e) {
    e.preventDefault();
    $(".user__nav").toggleClass("profile-transition");
});

//close profile menu when clicking outside of the box

$(".header__user").focusout(function() {
    if($(".user__nav").hasClass("profile-transition")) {
        $(".user__nav").removeClass("profile-transition");
    }
});