$（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'); } }); }); 

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

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

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