resize（）の特定のイベント

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