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

Question

在我的 codepen 项目网站的第 2 页上，我有一个 jquery 事件，当视图宽度大于 720 像素时，它会向右打开一个小简介幻灯片。

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

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

建议？

codepen project from freecodecamp

jquery:

$(window).resize(function() {
    var width = $(window).width();
    if (width < 720) {
        $("#flip").hide();
    }
    else 
    {
        $(".lead").hide(function(){
$("#flip").click(function(){
  $(".lead").toggle('slide','right',500);
 });
    }); 
    }
});

Answer 1

试试这个。

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

Answer 2

你可以使用：

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

您可以参考这个tutorial。