將jQuery .hide（）與CSS媒體查詢一起用於基於屏幕分辨率的菜單切換

Question

我有一個使用CSS媒體查詢的網站來檢測瀏覽器分辨率並相應地修改我的網站。

我的主導航菜單遇到了一個小問題。 我的網站上有很多頁面，我希望在加載時針對移動分辨率隱藏主導航，而在桌面分辨率下顯示。

這似乎是用CSS完成的一項簡單任務，但不幸的是，事實並非如此。 我無法同時使用display:none; 和visibility:hidden; 因為當我的菜單在加載時檢測到它是隱藏的時，它會將其高度設置為0，並且不會改變。

這是堆棧溢出頁面參考： 將div設置為顯示：無； 使用javascript或jQuery

最終，我發現的唯一選擇是在加載時隱藏菜單，同時仍然允許菜單正確計算其高度，這是jQuery的以下方面。

$(document).ready(function () {
    $(".hide-menu").hide();
    var $drillDown = $("#drilldown");
});

現在，此解決方案適用於我希望在加載時針對所有屏幕分辨率最初隱藏菜單的頁面。 但是，我想在許多頁面上隱藏菜單，這些菜單最初在移動設備加載時隱藏，但在桌面上顯示。

我試圖在jsfiddle中重新創建此方案： http : //jsfiddle.net/WRHnL/15/

正如您在小提琴中看到的那樣，菜單系統存在很大的問題，即頁面加載時不顯示。 有人對我如何完成此任務有任何建議嗎？

Answer 1

您可以通過比較屏幕尺寸來做到這一點：

$(document).ready(function () {
    var width = $(window).width();
    if (width < 768) {
        $(".hide-menu").hide();
    }
    var $drillDown = $("#drilldown");
});

Answer 2

您可以使用！important通過媒體查詢強制進入原始狀態。 這將覆蓋您的js中的“ display：none”。

例：

@media (max-width:980px){ 
nav  > .btn-group{display:none}
}

然后，您的Js切換style =“ display：block”或style =“ display：none”，以最大化窗口，並在下面重置您的原始樣式。

@media (min-width: 992px) {
nav  > .btn-group{margin:0px auto; display:inline-block !important}
}