Question

我的导航中有徽标（桌面）。在移动设备上，徽标位于页面标题中，导航是没有徽标的下拉列表。

它将带有jQuery的徽标从navi中放入标题中。

$(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

调整大小的特定事件（）

1 个答案: