JS的媒体查询

Question

我正在尝试为此脚本设置媒体查询，但没有成功。谁能指出我正确的方向？

<script>

var mq = window.matchMedia( "(min-width: 1024px)" );

if (mq.matches) {
   $(".number-<?php echo $counter; ?>").hover(function () {
     $(".section-<?php echo $section; ?> #hover-button-<?php echo $counter; ?>").stop().slideToggle();
     return false;
 });
}
else {

}
 </script>

Answer 1

尝试matchMedia的onchange事件

var mq = window.matchMedia("(min-width: 1024px)");

function mediaChange() {
  console.log(mq.matches)
  
  if (mq.matches) {
    $(".number-1").hover(function() {
      $(".section-1 #hover-button-1").stop().slideToggle();
      return false;
    });
  } else {
    $(".number-1").off('mouseenter mouseleave')
  }
  
}
mediaChange();

mq.onchange = mediaChange;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="number-1">
  hover me
</div>

<div class="section-1">
  <div id="hover-button-1">
    toggle
  </div>
</div>

注意：在Full Page模式下查看演示（运行按钮右侧）

Answer 2

这似乎使用最大宽度而不是最小宽度来工作

<script>

var mq = window.matchMedia( "(max-width: 1024px)" );

if (mq.matches) {

}

else {

   $(".number-<?php echo $counter; ?>").hover(function () {
     $(".section-<?php echo $section; ?> #hover-button-<?php echo $counter; ?>").stop().slideToggle();
     return false;
    });

}
 </script>