resize()的特定事件

Question

我有一个带有徽标的导航(桌面)。在移动设备上，徽标在页面的页眉中，导航是一个没有徽标的下拉列表。

它将带有jQuery的徽标从导航界面放入标题中。

$(window).resize(function() {
    var ww = $(window).width();
    if (ww < 1180) {
        $("#logo a").appendTo("#header-top").addClass("logo");
        $("#logo").remove();
    } if (bildschirmbreite > 1179) {
        $("#navigation-main .team").after('<li id="logo"></li>');
    }
});

这没有问题，一切都很清楚。但是，如果在桌面设备上调整窗口大小，我仍然会遇到一些问题。

有没有可能检查事件是否出现，这样当窗口再次变小和变大时，它就会出现？现在，一个新的列表项和徽标等将一次又一次地创建，只要调整窗口的大小即可。

我要怎么做才能防止这种情况发生？

向您致敬，马库斯

Answer 1

在CSS中使用媒体查询通常可以更好地实现这类事情。

默认情况下，将应用媒体查询之外的样式-在本例中为桌面站点。

#logo{
  display: none;
}

#navigation-main .team #logo {
  display: block;
}

/* Styles inside are only applied when the query becomes true, 
in this case when on mobile */

@media (max-width: 1179px) {
    #logo {
        display: block;
    }
    #navigation-main .team #logo {
        display: none;
    }
}

您将获得相同的结果，但您不需要任何JavaScript。您可能必须调整您的HTML以获得您想要的结果。在这里阅读更多关于它们的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries