Question

当窗口高于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');
    }
  });
});

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

Answer 1

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; }
}

两个街区看起来几乎相同，但它们不是。它们在悬停时以及当屏幕宽度低于1278px但宽度超过768px时强制“主动”外观。

$（window）.width的条件行为

1 个答案: