如何让jQuery导航栏效果仅在桌面端（≥992px）生效？

嘿，这个需求太常见啦！我给你整理了两个靠谱的解决方案，保证你的jQuery导航栏效果乖乖只在桌面端（视口宽度≥992px）触发，不会在平板或手机上捣乱～

方案1：窗口大小判断 + 防抖监听 #

这是最直接的实现方式，核心思路是初始化时检查一次视口宽度，同时监听窗口resize事件，动态切换导航栏效果的开启/关闭。为了避免resize时频繁触发导致性能问题，我们还会加个防抖处理。

// 封装你的导航栏效果逻辑
function initNavbarEffect() {
  // 这里替换成你原本的导航栏jQuery代码，比如hover下拉效果：
  $('.navbar-menu').hover(
    function() {
      $(this).find('.dropdown').slideDown(200);
    },
    function() {
      $(this).find('.dropdown').slideUp(200);
    }
  );
}

// 销毁桌面端效果，避免移动端残留问题
function destroyNavbarEffect() {
  // 移除之前绑定的事件
  $('.navbar-menu').off('hover');
  // 重置下拉菜单的样式，避免残留display属性
  $('.dropdown').css('display', '');
}

// 检查视口宽度，决定开启/关闭效果
function checkViewportSize() {
  if ($(window).width() >= 992) {
    initNavbarEffect();
  } else {
    destroyNavbarEffect();
  }
}

// 页面加载和resize时执行
$(document).ready(function() {
  // 页面初始化时先检查一次
  checkViewportSize();

  // 监听窗口resize，加防抖优化性能
  let resizeTimeout;
  $(window).on('resize', function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(checkViewportSize, 250);
  });
});

方案2：使用原生matchMedia API（更精准） #

如果你想要和CSS媒体查询完全同步的判断逻辑，推荐用这个方案。matchMedia可以直接监听CSS媒体查询的变化，比单纯判断窗口宽度更准确（比如不会受滚动条宽度影响）。

// 同样先封装效果和销毁逻辑
function initNavbarEffect() {
  $('.navbar-menu').hover(
    function() {
      $(this).find('.dropdown').fadeIn(200);
    },
    function() {
      $(this).find('.dropdown').fadeOut(200);
    }
  );
}

function destroyNavbarEffect() {
  $('.navbar-menu').off('hover');
  $('.dropdown').css('display', '');
}

// 定义桌面端媒体查询规则
const desktopQuery = window.matchMedia('(min-width: 992px)');

// 处理媒体查询变化的回调函数
function handleViewportChange(e) {
  if (e.matches) {
    // 当前是桌面端，开启效果
    initNavbarEffect();
  } else {
    // 当前是移动端/平板，销毁效果
    destroyNavbarEffect();
  }
}

// 初始化和监听
$(document).ready(function() {
  // 页面加载时先执行一次
  handleViewportChange(desktopQuery);
  
  // 监听媒体查询的变化
  desktopQuery.addEventListener('change', handleViewportChange);
});

额外小提示 #

• 一定要写destroyNavbarEffect函数！不然用户从桌面端缩小窗口到移动端时，之前绑定的hover事件可能还残留，导致触屏设备上出现奇怪的交互问题。
• 如果你的导航栏在移动端有单独的逻辑（比如汉堡菜单），可以在destroyNavbarEffect里顺便初始化移动端的效果，保证两端逻辑互不干扰。

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