1

モバイル デバイス (この例では 700px 未満) で機能を使用し、大型デバイスで別の機能を使用しようとしています。次の方法で matchMedia を使用します。

var mql = window.matchMedia("(min-width: 700px)");
mql.addListener(handleResize);
handleResize(mql);
function handleResize(mql) {
    if (mql.matches) {      
    $(".button").on("click", function(){
        $(".hidden").slideToggle();
    })                 
  } else {  
    $(".button").on("click", function(){
        $(".hidden").fadeToggle();
    })   
  }
}

最初は、コードは期待どおりに動作しますが、ウィンドウのサイズを変更すると問題が発生します。たとえば、ウィンドウが最初に 700px 未満で読み込まれ、次に 700px を超えるサイズに変更された場合、ボタンは最初にフェードを起動し、次にスライドし、その逆も同様です。コース外で達成したいのは、大きな画面ではスライドのみを呼び出し、小さな画面ではフェードのみを呼び出すことです。どんな助けでも大歓迎です。

乾杯！

4

1 に答える 1

1

問題は、コールバックが発生するたびに、別のクリックイベントがボタンhandleResizeにアタッチされることです。大量のイベントを添付しないようにするには、まず で削除する必要があります。off()

これは、あなたが望んでいたことを達成する例です:

var $hidden = $('.hidden');
var $btn = $('button');
var mql = window.matchMedia("(min-width: 700px)");

function bindSlide() {
  // Using `off()` is required in order not to end up attaching a lot of callbacks
  $btn.off("click.mql").on("click.mql", function() {
    $hidden.stop().slideToggle();
  }); 
}

function bindFade() {
  $btn.off("click.mql").on("click.mql", function() {
    $hidden.stop().fadeToggle();
  }); 
}

function handleScreen(mql) {
  if (mql.matches) {       
    bindSlide();
  } else {
    bindFade();
  }
}

// Handle media query 'change' event
mql.addListener(handleScreen);
handleScreen(mql);

window.matchMediaすべてのブラウザでサポートされているわけではないことに注意してください。matchMedia をネイティブにサポートしていないブラウザーの場合は、ポリフィルを使用できます: https://github.com/paulirish/matchMedia.js

実際の例: http://jsfiddle.net/rhkLng9o

于 2015-02-10T21:48:08.387 に答える