Question

我有以下代码： -

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的速度刷新页面时，此工作正常。但就响应性而言，它将根据您的初始浏览器宽度附加代码。有没有办法绕过这个，以便它检测更改时的浏览器宽度，并将添加/删除上面的代码？

提前致谢。

Answer 1

为什么不使用：

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

这样你在每次调整大小时都会占用较少的浏览器资源。

Answer 2

我认为$(window).resize(function(){...})的听众应该解决你的问题。只需在其中插入代码，每次调整窗口大小时都会应用函数。

jQuery，窗口宽度和追加

2 个答案: