如何检测导航栏换行？基于JavaScript/jQuery的小屏导航隐藏方案

核心思路 #

因为无法依赖固定屏幕宽度的媒体查询，我们可以通过检测导航元素的高度变化或者导航内链接的垂直位置差异来判断是否发生换行：正常单行状态下，导航高度等于单个链接的高度，所有链接的垂直偏移量一致；一旦换行，导航整体高度会增加，部分链接的垂直位置会和第一个链接产生差异。

实现步骤与代码 #

1. 调整CSS优化布局检测

先给容器添加清除浮动的样式，避免高度塌陷影响检测结果：

.container {
  padding: 15px;
  background: lightgrey;
  overflow: hidden; /* 清除浮动，确保容器高度能正确包裹内容 */
}

.navigation {
  float: right;
}

.navigation a {
  margin-left: 15px;
  display: inline-block; /* 确保链接高度可被准确获取 */
}

2. JavaScript/jQuery实现检测逻辑

提供两种检测方案，根据需求选择即可：

方案一：通过导航高度变化判断

$(function() {
  // 页面加载完成后，记录导航未换行时的初始高度
  const initialNavHeight = $('.navigation').outerHeight();
  
  // 定义检测换行的函数
  function checkNavWrap() {
    const currentNavHeight = $('.navigation').outerHeight();
    // 当前高度大于初始高度，说明发生换行
    if (currentNavHeight > initialNavHeight) {
      $('.navigation').hide();
    } else {
      $('.navigation').show();
    }
  }
  
  // 初始化时执行一次检测
  checkNavWrap();
  
  // 监听窗口尺寸变化，实时检测
  $(window).on('resize', checkNavWrap);
});

方案二：通过链接垂直位置判断（更精准）

$(function() {
  function checkNavWrap() {
    const $navLinks = $('.navigation a');
    const firstLinkTop = $navLinks.first().offset().top;
    let isWrapped = false;
    
    // 遍历所有链接，判断是否有链接和第一个链接垂直位置不同
    $navLinks.each(function() {
      if ($(this).offset().top !== firstLinkTop) {
        isWrapped = true;
        return false; // 跳出循环，提升性能
      }
    });
    
    isWrapped ? $('.navigation').hide() : $('.navigation').show();
  }
  
  // 初始检测+窗口resize监听
  checkNavWrap();
  $(window).on('resize', checkNavWrap);
});

优化建议 #

• 给resize事件添加防抖处理，避免窗口拖动时频繁触发检测：

  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(checkNavWrap, 250);
  });
  

• 如果导航内有动态添加/删除链接的操作，需在内容更新后重新调用checkNavWrap()函数

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