WordPress flex布局子菜单jQuery slideDown页面重载后回弹问题求助

问题原因 #

jQuery的slideDown()方法默认会先将目标元素设置为display:block来计算元素的完整自然高度，再基于这个高度执行展开动画。你当前的代码是在slideDown的start回调里才将子菜单的display改为flex，首次触发动画时：

1. jQuery先按display:block计算出子菜单高度，开始执行高度从0到这个值的动画
2. 动画启动后触发start回调，子菜单被改为flex布局，实际高度发生了变化
3. 动画结束时元素会自动适配为当前布局的真实高度，就出现了超出后回弹的现象
   后续触发动画时jQuery已经缓存了元素的高度值，就不会再出现该问题。

修复方案 #

方案1：预计算子菜单的flex布局高度（推荐，改动最小） #

页面初始化时提前获取所有flex布局下的子菜单高度，避免动画时高度计算偏差，修改你的jQuery代码如下：

jQuery(document).ready(function() {
    // 预计算所有子菜单的flex高度
    jQuery('.has-mega-menu > .sub-menu').each(function() {
        // 临时设置为可见的flex布局，获取真实高度
        jQuery(this).css({
            'display': 'flex',
            'visibility': 'hidden',
            'position': 'absolute'
        });
        // 缓存高度到元素数据里
        jQuery(this).data('realHeight', jQuery(this).outerHeight());
        // 恢复初始隐藏状态
        jQuery(this).css({
            'display': 'none',
            'visibility': 'visible'
        });
    });

    jQuery('.main-navigation .has-mega-menu').hover(function() {
        const $subMenu = jQuery(this).children('.sub-menu');
        if ($subMenu.length) {
            $subMenu.stop().css('height', 0).css('display', 'flex').animate({
                height: $subMenu.data('realHeight')
            }, 250);
            $subMenu.css('z-index', '3');
        }
    }, function() {
        const $subMenu = jQuery(this).children('.sub-menu');
        if ($subMenu.length) {
            $subMenu.stop().animate({
                height: 0
            }, 250, function() {
                jQuery(this).css('display', 'none');
            });
            $subMenu.css('z-index', '2');
        }
    });
});

方案2：调整slideDown执行逻辑 #

如果不想修改动画实现方式，也可以直接给子菜单设置固定的flex-direction和flex-wrap属性，减少block和flex布局下的高度差，不过该方案兼容性不如方案1，适合菜单结构固定的场景。

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