jquery - 在移动 View (> 720px)中使用jquery修改css

在我的Codepen项目网站的第二页上，我有一个jquery事件，当在大于720px宽的视图中浏览时，它会在右侧打开一个Blub幻灯片。

当宽度小于720px时，我试图使“单击向右滑动”的东西消失。但是，在初始加载页面时，显示的是Blubl，并且在该区域中单击似乎无效。同样，当我将浏览器的尺寸设置得尽可能小时，“单击滑动”和“ blurb”一起消失，但是当我将其调整为全屏尺寸时，它不会回来。我在这里做错了什么？

请注意，我现在知道如何使用媒体查询解决此问题，但是我想看看是否可以在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);
 });
    });
    }
});

最佳答案

尝试这个。

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