如何检测flex布局中换行的li元素并移入汉堡菜单？

架构老林

2026-8-19

解决方案

1. 核心检测逻辑：通过垂直位置判断换行

利用元素的offsetTop属性对比第一个非汉堡菜单的<li>的垂直位置——只要某个<li>的offsetTop大于第一个元素的，就说明它已换行到第二行。

2. 封装菜单处理函数（含移动/回移逻辑）

function handleMenuWrap() {
    const $menuList = $('nav.e-panel-row ul');
    const $hamburgerSubmenu = $('#hamburger .sub-menu');
    const $firstLi = $menuList.find('li:not(#hamburger)').first();
    if (!$firstLi.length) return;

    const firstTop = $firstLi.offset().top;

    // 先将汉堡子菜单里的元素移回原菜单，避免重复移动导致元素丢失
    $hamburgerSubmenu.find('li').appendTo($menuList);

    // 检测并移动换行的li
    $menuList.find('li:not(#hamburger)').each(function() {
        const $li = $(this);
        if ($li.offset().top > firstTop) {
            $li.appendTo($hamburgerSubmenu);
        }
    });

    // 控制汉堡菜单的显示/隐藏
    $('#hamburger').toggle($hamburgerSubmenu.find('li').length >= 1);
}

3. 初始化与窗口 resize 监听

页面加载时执行一次逻辑，同时监听窗口尺寸变化（添加防抖避免频繁触发）：

// 页面初始化时执行
$(document).ready(function() {
    handleMenuWrap();
});

// 窗口 resize 防抖处理
let resizeTimer;
$(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(handleMenuWrap, 250);
});