如何使用Vanilla Javascript根据菜单项数量控制多列布局

核心逻辑 #

• 页面DOM加载完成后，选中所有.main-nav-list菜单容器
• 逐个统计每个菜单的直接子li元素数量
• 若数量超过4，为菜单添加.column类启用多列布局，否则移除该类适配单列展示

完整JS代码 #

// 等待DOM完全加载后执行逻辑
document.addEventListener('DOMContentLoaded', handleMenuLayout);

function handleMenuLayout() {
  // 获取所有菜单容器
  const allMenus = document.querySelectorAll('.main-nav-list');
  
  allMenus.forEach(menu => {
    // 仅统计当前菜单的直接子li数量，不会统计嵌套的子菜单元素
    const menuItemCount = menu.querySelectorAll(':scope > li').length;
    // 超过4个启用多列，否则用单列
    menu.classList.toggle('column', menuItemCount > 4);
  });
}

补充说明 #

• 建议将HTML中手动写在ul上的column类移除，全部交给JS自动判断添加，避免逻辑冲突
• 如果菜单是动态渲染（比如通过接口拉取数据生成），在菜单渲染完成后手动调用handleMenuLayout()即可更新布局
• 如果需要实时监听菜单元素变化自动适配，可以额外添加MutationObserver监听菜单的子节点变动，变动时触发handleMenuLayout()

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