當調整瀏覽器大小時，jquery和響應式設計的行爲並不像預期的那樣

我試圖實現在斷點700px處在導航菜單和導航按鈕之間切換的響應式設計。爲此，我有兩件事情：當調整瀏覽器大小時，jquery和響應式設計的行爲並不像預期的那樣

媒體查詢

@media screen and (min-width: 700px) 
{ 
    #main-nav 
    { 
     display: block; 
    } 

    #navButton 
    { 
     display: none; 
    } 
}

一個簡單的jQuery腳本關閉菜單時，它是開放的窗口大小。

// Fixing window resize bugs 
$(window).resize(function() 
{ 
    if ($(window).width >= 700) 
    { 
     $("#navButton").css("display", "none"); 
    } 
    else if ($(window).width < 700) 
    { 
     $("#navButton").css("display", "block"); 
     $("#menu-buttons").css("display", "none"); 
    } 
});

當我調整瀏覽器窗口大小時出現問題。它可以在我所有的Mac瀏覽器（Chrome 45，Firefox 41和Safari 8）上完美地切換這兩種佈局，但它在Windows瀏覽器（目前測試的IE 11和Firefox 41）上不起作用。當窗口innerWidth在700px和716px之間時，導航和按鈕同時在屏幕上。一個解決方法是在腳本css("visibility", "hidden");更換css("display", "none");但不幸的是，它產生其它問題......

如果任何人有這個問題的任何信息，請讓我知道。

編輯：通過在媒體查詢中使用關鍵字「！important」解決了問題。

來源

2015-10-05 dmorisset

爲什麼要使用jQuery？這可以通過CSS來實現 – binaryfunt

我在其他地方使用基本的JQuery動畫來將菜單按鈕更改爲按鈕列表。它創建了一些我不能在CSS中重寫的內聯樣式。 – dmorisset

你不能在CSS中使用'！important'嗎？ – binaryfunt

該問題已通過在媒體查詢中添加！important解決。

來源

2015-10-05 17:44:31 dmorisset

當調整瀏覽器大小時，jquery和響應式設計的行爲並不像預期的那樣

回答

相關問題