jquery踢如果屏幕寬度小於500px

我有這個代碼顯示內容，如果點擊。問題是，如果屏幕/設備寬度最大爲500像素，則此功能應該可用。我會如何去做這件事？jquery踢如果屏幕寬度小於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"); 
    }); 
});

更新：我沒有做很好地解釋了我想要的東西來完成：/我想這個圖像顯示在屏幕寬度大於500像素。當寬度小於500px時，我想要一行說，單擊此處顯示圖像並顯示圖像

來源

2013-03-18 user2141649

僅供參考使用.toggle（）事件（VS效果），如已被棄用（http://api.jquery.com /category/deprecated/deprecated-1.8/） – j08691 2013-03-18 17:32:18

嘗試跟蹤screen.width和screen.height。

事情是這樣的：

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

來源

2013-03-18 17:30:23 97ldave

您需要首先得到屏幕寬度，然後你可以使用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... 
}

來源

2013-03-18 17:30:43 dev

@ user2141649請參閱我的編輯... – dev 2013-03-18 17:46:59

當窗口大小小於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"; 
      }); 
     }); 
    } 
});

來源

2013-03-18 17:31:22 undefined

我沒有做好解釋我想完成的任務：/ II希望此圖像在屏幕寬度超過500像素時顯示。當寬度小於500像素時，我想要一條線條，點擊此處顯示圖像並顯示圖像。 – user2141649 2013-03-18 17:41:42

@ user2141649爲什麼不使用CSS3 Media Queries？ – undefined 2013-03-18 17:43:42

您也可以綁定你的函數的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/

來源

2013-03-18 18:00:41 Axel

jquery踢如果屏幕寬度小於500px

回答

相關問題