jQuery的窗口的寬度和追加

我有下面的代碼： -jQuery的窗口的寬度和追加

if(jQuery(window).width() <= 992) { 

    $('#menu-main-menu').prepend('<a id="book-now-menu" href="https://bookings.planetbouncetrampolinepark.com/JumpBookings/BookSession.aspx?site=1&group=1">BOOK NOW</a>'); 

    var social_menu = '<div id="social-menu">'; 
     social_menu += '<a href="" target="_blank"><span class="icon-social icon-facebook"></span></a>'; 
     social_menu += '<a href="" target="_blank"><span class="icon-social icon-instagram"></span></a>'; 
     social_menu += '<a href="" target="_blank"><span class="icon-social icon-twitter"></span></a>'; 
     social_menu += '<a href="" target="_blank"><span class="icon-social icon-youtube"></span></a>'; 
     social_menu += '</div>'; 

    $('#menu-main-menu').append(social_menu); 

}

當你刷新頁面以低於992px或比超過992px更大這工作得很好。但就響應性而言，它會根據您的初始瀏覽器寬度來附加代碼。有沒有辦法繞過這個，以便它檢測到更改後的瀏覽器寬度，並將添加/刪除上述代碼？

在此先感謝。

來源

2016-02-26 nsilva

你爲什麼不加入它總是到您的網頁，並使用控制可見CSS媒體查詢？ –

你爲什麼不使用：

@media all(max-width: 992){ 
.social_menu{ 
display: none; 
}

你拿起上計算每個調整較少的瀏覽器ressources這樣..

來源

2016-02-26 13:39:58 miqueloi

不知道爲什麼我沒有想到如果這樣做。我基本上刪除了'if（jQuery（window）.width（）<= 992）{'所以它不管追加內容，然後添加'.social_menu {display：none; }'，並使用上面的媒體查詢來顯示它們的移動設備。謝謝 – nsilva

我認爲傾聽$(window).resize(function(){...})應該可以解決您的問題。只需在其中插入代碼，並且每次調整窗口大小時都會應用函數。

來源

2016-02-26 13:34:31

我已經添加了這個並添加了一個else子句; ''jQuery（'＃book-now-menu，＃social-menu'）。remove（）;' - 但是假設你將瀏覽器大小從800px改爲500px，它增加了6行社交菜單，有沒有辦法只觸發變化一次，當它低於或大於992px？ – nsilva

jQuery的窗口的寬度和追加

回答

相關問題