下拉菜单关闭存在约1秒延迟 设置transition-delay为0未生效

关闭延迟和animation-delay、transition-delay属性无关，是两个实现逻辑问题导致的：

• 你给下拉展开态设置的max-height: 3000px远大于下拉内容的实际高度。CSS的max-height过渡是从设定的起始值计算动画时长，关闭时需要从3000px过渡到0px，总时长2秒，但从3000px下降到内容真实高度的这段过程中，容器本身没有内容支撑，视觉上看不到任何收起效果，这段无视觉反馈的动画空跑时间，就会表现为约1秒的操作延迟。
• 你给下拉容器设置的过渡时长transition: 2s本身过长，会进一步放大上述延迟感。

• 不要给展开态设置远大于实际内容的max-height值，固定值场景下设置为略大于内容最大高度即可（比如你的多层嵌套下拉总高度不超过500px，就设为500px）；如果要适配任意高度的内容，直接通过JS动态获取内容实际高度赋值给max-height，彻底消除高度差带来的动画空跑。
• 把下拉过渡时长调整到合理区间，侧边栏下拉的过渡时长设为0.2s-0.3s就足够流畅，不需要2秒这么长。

静态高度修复版CSS（适合内容高度固定的场景） #

把原有下拉相关的CSS替换为以下代码即可：

.dropdown,
.dropdown-child {
    overflow: hidden;
}

.dropdown>div {
    max-height: 0px;
    transition: max-height 0.3s ease;
}

.dropdown.open>div {
    max-height: 500px;
}

动态高度修复版JS（适合内容高度可变、多层嵌套的场景） #

把原有下拉点击的JS逻辑替换为以下代码，自动适配内容高度，完全不会出现延迟：

$(".dropdown").on("click", e => {
    e.stopPropagation();
    const current = $(e.currentTarget);
    const content = current.children("div");
    if (current.hasClass("open")) {
        content.css("max-height", "0px");
        current.removeClass("open");
    } else {
        content.css("max-height", content.prop("scrollHeight") + "px");
        current.addClass("open");
    }
})

内容的提问来源于stack exchange，提问作者kamksa