メディアクエリーがjqueryで動作しない

Question

私のペンで見ることができるように、小売店または卸売店をクリックするたびに、リダイレクトを防止してタブを開きます。

767以上のサイズのデバイスからコードを動作させるにはどうすればよいですか？現時点で

私のjQueryのは次のようになります。

$(document).ready(function(){ 
    if($(window).width() > 767){ 
      $('#retail a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.retail').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 

      $('#wholesale a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.wholesale').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 
    } 
}); 

また、私のfull code here

Answer 1

$(document).ready(function(){ 
     $('#retail a').on("click", function(e){ 
      if($(window).width() > 767){ 
      $('li.retail').toggleClass('display'); 
      $(this).toggleClass('angle'); 
      } 
     }); 
     $('#wholesale a').on("click", function(e){ 
      if($(window).width() > 767){ 
      $('li.wholesale').toggleClass('display'); 
      $(this).toggleClass('angle'); 
      } 
     }); 
} }); 

を確認することができ、クリックイベント内であれば条件を追加してください。私の上記のコードを参照してください。

Answer 2

$(window).resize()機能を追加しようとしています。私はこれを前に試してみました。

$(document).ready(function(){ 
    $(window).resize(function(){ 
     // your code 

    }); 
}); 

Answer 3

jqueryのは、次のようになります。あなたはcodepen

$(document).ready(function(){ 
    $(window).resize(function(){ 
     if($(window).width() > 767){ 
      $('#retail a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.retail').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 

      $('#wholesale a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.wholesale').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 
     } 
    }).trigger('resize'); 
}); 

Answer 4

それが正常に動作させるために、私はサイズ変更機能を使用してブラウザがリサイズして起動することなく、ウィンドウ幅を検出することができるようにサイズ変更をトリガー：あなただけ記述する必要が

$(document).ready(function(){ 
    $(window).resize(function(){ 
    if($(window).width() > 767){ 
      $('#retail a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.retail').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 

      $('#wholesale a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.wholesale').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 
    } 
}); 
});