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的窗口的宽度和追加

回答

相关问题