如果屏幕宽度小于500px，则启用Jquery

Question

我有这个代码，显示内容，如果点击。问题是，只有当屏幕/设备宽度最大为500px时，此功能才可用。我该怎么做呢？

$(function () {
    $('.row1').hide();
    $('#show').toggle(function () {
        $('.row1').slideDown("slow");
        $(this).attr("src", "bilder/cancel.png");
    }, function () {
        $('.row1').slideUp("slow");
        $(this).attr("src", "bilder/add.png");
    });
});

更新:我没有很好地解释我想要完成的事情:/i当屏幕宽度超过500px时，我希望显示此图像。当宽度小于500px时，我想要一条线，上面写着单击此处显示图像，图像就会出现

Answer 1

如果屏幕宽度大于一定的宽度，则首先需要获取屏幕宽度，然后可以使用if语句来运行上面发布的代码。

例如。

if($(window).width() > 500){
   $('.row1').hide();
   $('#show').toggle(function(){
      $('.row1').slideDown("slow");
      $(this).attr("src","bilder/cancel.png" );
   },function(){
      $('.row1').slideUp("slow");
      $(this).attr("src", "bilder/add.png" );
   });
};

编辑

看着你的评论，你想要显示一张图片，否则就隐藏它。我可能会同意这将是更好和更容易做的css媒体查询，但请参阅下面的编辑，其中显示了一个JS解决方案。

if($(window).width() > 500){
   //show the image
   $('.row1').slideDown("slow");
   //etc...   
}else{
   //hide the image
   $('.row1').slideUp("slow");
   //etc...
}

Answer 2

尝试跟踪screen.width和screen.height。

如下所示：

    function doSomething(){
        if (screen.width < 500){
            //Do Something
       }
    }

Answer 3

可以在窗口大小小于500时绑定事件，也可以在处理程序中使用If语句。请注意，toggle事件方法已弃用，您可以改用slideToggle方法。

$(function () {
    var $row = $('.row1').hide();
    $('#show').click(function () {
        if ($(window).width() > 500) return;
        $row.stop().slideToggle("slow");
        $(this).prop("src", function(i, src){
            return src === "bilder/cancel.png" 
                   ? "bilder/add.png" 
                   : "bilder/cancel.png";
        });
    });
});

或者：

$(function () {
    if ($(window).width() > 500) {
       var $row = $('.row1').hide();
       $('#show').click(function () {
           $row.stop().slideToggle("slow");
           $(this).prop("src", function(i, src){
                return src === "bilder/cancel.png" 
                       ? "bilder/add.png" 
                       : "bilder/cancel.png";
           });
       });
    }
});