在移动视图中使用jquery修改css（>；720px）

在我的codepen项目网站的第二页上，我有一个jquery事件，当视图宽度大于720px时，它会使一个小的模糊幻灯片向右打开

当宽度小于720px时，我试图让“点击向右滑动”的东西消失。然而，在页面的初始加载时，会显示导语，在该区域单击似乎不起作用。另外，当我使浏览尽可能小时，“点击滑动”会随着简介一起消失，但当我调整到全屏时不会回来。我做错了什么

注意，我现在知道如何使用媒体查询解决这个问题，但我想看看是否可以在jQuery脚本中实现它，而不必在css中更改它

建议

jquery：

$（窗口）。调整大小（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度<720）{
$（“#翻转”）.hide（）；
}
其他的
{
$（“.lead”）.hide（函数（）{
$（“#翻转”）。单击（函数（）{
$（“.lead”）.toggle（'slide'，'right'，500）；
});
}); 
}
});您可以使用：

<script>
   if (window.matchMedia("(min-width: 720px)").matches) {
   /*  Code to execute */
  } else {
   /*  Code to execute */
  }
</script>


if（window.matchMedia（“（最小宽度：720px）”）.matches）{
/*要执行的代码*/
}否则{
/*要执行的代码*/
}

你可以参考这个
 试试这个

// Your responsive logic
var myResize = function(){
    var width = $(window).width();
    if (width < 720) {
       $("#flip").hide();
    }else{
       $(".lead").hide();
       $("#flip").show();
    }
};
// Execute it every resize
$(window).resize(myResize);
$(myResize); // Execute it on ready as well
// Keep the click event handlers outside so they get defined once
$("#flip").click(function(){
    var width = $(window).width();
    if (width > 720) {
        $(".lead").toggle('slide','right',500);
    }
});

//您的响应逻辑
var myResize=函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度<720）{
$（“#翻转”）.hide（）；
}否则{
$（“.lead”）.hide（）；
$（“#翻转”）.show（）；
}
};
//每隔一天执行一次
$（窗口）。调整大小（myResize）；
$（myResize）；//也可以在就绪时执行它
//将click事件处理程序保持在外部，以便它们只定义一次
$（“#翻转”）。单击（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度>720）{
$（“.lead”）.toggle（'slide'，'right'，500）；
}
});
这只执行一次，而不是每次。另外，你链接到的教程是法语的…对S.O.来说不是最好的。这太完美了！看起来我走的路是对的，但是我的代码中没有涉及到一些关键点。看起来这是另一件需要处理的事情。至少很高兴知道我走的是正确的道路。非常感谢你！别担心！你几乎拥有所有重要的作品