Jquery：根據瀏覽器大小執行事件

在我的網站上，當瀏覽器視圖端口大小變爲小於480像素時，我希望將段落轉換爲手風琴菜單。Jquery：根據瀏覽器大小執行事件

這是我使用來實現，代碼：

$(document).ready(function(){ 
    var pageWidth = $(window).width(); 
    if (pageWidth <= 480) { 

$('.data > h3').addClass('jqlink'); 
$('.data ').addClass('jqbg'); 
$('.data>h3').append('<p>[+]</p>'); 
    $('.data > p').hide(); //hide the event 

    $('.data > h3').click(function(){ //clicked on the title 
     if($(this).next().is(':visible')){  //is this question already visible? 
     $(this).next().hide('fast');   //hide it (toggle) 
     }else{ 
     $('.data > p:visible').hide('fast'); //otherwise, hide whatever is currently visible 
     $(this).next().show('fast');     //show the question we clicked on 
     } 
    }); 

} });

它出色的作品，但它只是觸發時，瀏覽器首次加載。如果瀏覽器在加載後重新調整大小，那麼代碼將無法工作。

我知道.resize()命令。但是，只有在瀏覽器調整大小的情況下，這似乎才起作用。如果瀏覽器第一次加載時小於480px，那麼只有在用戶調整瀏覽器大小時纔會觸發代碼。

如何讓代碼兼容調整大小和瀏覽器負載？

來源

2011-11-26 big_smile

你有沒有按上面的代碼」觸發瀏覽器負載？ –

OP希望它在瀏覽器負載和瀏覽器調整大小時觸發 – ManseUK

您可以使用標準CSS媒體類型http://www.w3.org/TR/CSS2/media.html和媒體查詢http：//www.w3。 org/TR/css3-mediaqueries /用於很多調整大小的工作，例如針對不同的佈局，沒有任何JavaScript;然後在頂層爲其他需要的行爲分層。這篇博客文章提供了一些關於媒體查詢和JavaScript一起使用以獲得結果的示例洞察http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/您的頁面可能是不必要的JavaScript重量取決於你的目標瀏覽器。 –

function checkWindowSize() { 
    var pageWidth = $(window).width(); 
    if (pageWidth <= 480) { 

    } 
} 

$(document).ready(function() { 
    checkWindowSize(); 
    $(window).resize(checkWindowSize); 
});

應該做的伎倆，防止你的代碼重複...

來源

2011-11-26 13:57:01 ManseUK

這太好了。但唯一的問題是，每次瀏覽器菜單移過480px時，手風琴菜單都會添加到頁面中。例如，在瀏覽器重新調整大小從480px到470px時，會出現10個菜單！反正有（這樣菜單隻出現一次）？我想我正在尋找相當於jQuery的CSS媒體查詢。 –

只需檢查手風琴在添加之前是否已經存在！將您的手風琴代碼添加到問題 – ManseUK

我不確定如何檢查代碼。不過，我已將手風琴代碼添加到開場白中。感謝您的持續幫助！ –

見.resize()方法。

下面是一個Example，或full window version

在這個例子中，你的窗口大小首先檢查文檔時首先加載，然後聽窗口的變化，等待它降到480像素。

編輯：我已更新我的示例以包含變量和條件以確保所需的操作只發生一次。

來源

2011-11-26 13:57:02

這很棒，但它也有與ManseUK解決方案相同的問題。儘管感謝您的幫助！ –

@big_smile簡單地添加一個條件是否存在或不存在手風琴。我會將它添加到我的示例中... –

感謝您的持續幫助！在JSFiddle示例中，無論您調整窗口大小多少，文本都會顯示False。 –

在頁面加載，你可以在Modernizr的使用媒體查詢：http://www.modernizr.com/docs/#mq

如果（Modernizr.mq（ '只有所有和（最大寬度：480像素）'）{

//初始化的協議

}

這將根據設置在網頁加載480像素下的所有視口。對於調整大小，使用調整大小（）你提到

來源

2011-11-26 16:25:04

Jquery：根據瀏覽器大小執行事件

回答

相關問題