无法通过GSAP过渡创建下拉菜单

Question

我在JavaScript中太糟糕了，很抱歉。

我有一个带有子菜单的简单菜单，因此在单击其父级链接时，子菜单应该会下拉。子菜单是隐藏的，它应该随过渡显示，但我不明白为什么它不能正常工作，它显示但没有过渡时间。

我的HTML：

<div class="menu-container">
    <ul class="menu">
        <li class="menu-item">
            <a>Home</a>
        </li>
        <li class="menu-item-has-children">
            <a>Services</a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a>Finance</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的CSS：

.menu {
    margin: 0;
    list-style: none;
    text-align: center;
    padding: 100px 0;
}
.menu-item a {
    display: inline-block;
    border-bottom: none;
}
.sub-menu {
    list-style: none;
    height: 0;
    overflow: hidden;
}

我的js：

$('.menu-container').on('click', '.menu-item-has-children > a', (e) => {
    e.preventDefault();
    if(!$(e.currentTarget).parents('.sub-menu').length) {
        $('.menu > .menu-item').find('> a').trigger('click');
    }
    TweenMax.to($(e.currentTarget).parent().find('ul'), 0.7, {height: 'auto', ease: Power2.easeInOut});
});

我在做什么错？你能帮我吗？对不起，我的英语。

Answer 1

运行时未发现任何问题：https://codesandbox.io/s/great-haze-fd4qy

看起来它过渡正常。这是预期的行为吗？