如果屏幕宽度小于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");
    });
});

更新:我没有很好地解释我想要完成的任务:/ II希望此图像在屏幕宽度超过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...
}