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

更新：我没有很好地解释我想要完成的事情：/我想要在屏幕宽度超过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";
           });
       });
    }
});

Answer 4

您还可以将函数绑定到resize事件。每当调整浏览器窗口大小时，这将调用您的函数。

function myFunction() {
    if($(window).width() > 500)
    {   
        //Code to run when greater than...
    }
    else
    {
        //Code to run when less than...
    }
}

//initialize
myFunction();

//call when the page resizes.
$(window).resize(function() {
    myFunction();
});

您可以在此处查看有效的可视化示例：http://jsfiddle.net/q6BpH/1/

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

4 个答案: