$(window).width 的条件行为

当窗口高于 1278 像素时，我想要特定的 mouseenter 和 mouseleave 行为。对于低于 1278 的宽度，我想禁用此切换行为，并将 2 个元素设置为 1 个状态（可见和活动）。如果浏览器宽度大于 1278，我还必须将状态重置回默认值（隐藏和非活动状态）。这就是我所拥有的：

$('section').live('mouseenter', function() {
  if ($(window).width() > 1278) {
    $(this).find('menu').removeClass('hidden');
    $(this).find('div.section-wrapper').addClass('active');
  }
}).live('mouseleave', function() {
  if ($(window).width() > 1278) {
    $(this).find('menu').addClass('hidden');
    $(this).find('div.section-wrapper').removeClass('active');
  }
});

$(document).ready(function() {
  $(window).bind('load resize orientationchange', function(){
    if ($(window).width() < 1278) {
      $('section').find('menu').removeClass('hidden');
      $('section').find('div.section-wrapper').addClass('active');
    } else {
      $('section').find('menu').addClass('hidden');
      $('section').find('div.section-wrapper').removeClass('active');
    }
  });
});

它有效，但我想知道我是否可以做一些更优雅的事情。

CSS 媒体查询是这里的最佳选择。虽然除非您使用的是速度较慢的设备，否则您不会注意到性能的提高，但这是更快的等价物：

@media(min-width: 1279px) {
  section:hover {
    menu.hidden {
      display: block;
      visibility: visible;
    }
    .section-container { padding: 14px; }
    .section-wrapper { border: 1px #ddd solid; }
  }
}
@media(min-width: 768px) and (max-width: 1278px) {
  menu.hidden {
    display: block;
    visibility: visible;
  }
  .section-container { padding: 14px; }
  .section-wrapper { border: 1px #ddd solid; }
}

这两个块看起来几乎相同，但事实并非如此。它们在悬停时以及屏幕宽度低于 1278 像素但高于 768 像素时强制显示“活动”外观。