Question

我有这个难题：
我有一个动画菜单，在<a class="header__user__company>标签点击时具有过渡效果。当我使元素失去焦点时，下拉菜单再次消失。但是，当我单击<ul>中的任何链接时，我会到达页面，但菜单同时关闭。以及我的第一个bug：当我在<a>内单击<li>并按住鼠标按钮时，菜单消失了，而我在“空气”中按住了一下。我知道我无法集中那些不是input，a或select标签的东西（就像我尝试过的:)）有什么想法吗？

动画下拉菜单，在html中如下所示：

<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>

此CSS：

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

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

和jQuery：

// 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");
    }
});

有什么想法吗？请

按住jQuery下拉菜单关闭

0 个答案: