在移动视图中使用 jquery 修改 css (>720px)

Question

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

我试图在宽度小于 720px 时让 "click to slide right" 东西消失。但是，在初始加载页面时，会显示宣传信息，并且在该区域中单击似乎不起作用。此外，当我将浏览器设置得尽可能小时，"click to slide" 会与宣传语一起消失，但当我将其调整为全屏时不会再出现。我在这里做错了什么？

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

您可以使用：

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

你可以参考这个tutorial。

Answer 2

试试这个。

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

在移动视图中使用 jquery 修改 css (>720px)

Using jquery to modify css when in mobile view (>720px)

css

jquery

media-queries