2

ウィンドウが 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');
    }
  });
});

それは機能しますが、もっと優雅なことをできるかどうか疑問に思っています。

4

1 に答える 1

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

2 つのブロックはほとんど同じに見えますが、そうではありません。それらは、画面が幅 1278 ピクセル未満で幅 768 ピクセルを超える場合と同様に、ホバリング時に「アクティブ」な外観を強制します。

于 2013-05-07T22:38:01.010 に答える