菜單在屏幕上丟失背景顏色

我有一個固定的左側導航爲我的網站的桌面版本。 sidenav改變移動版本的邊。我正在測試iPad mini。橫向顯示桌面。縱向顯示移動設備。但是，當我將方向從縱向改爲橫向時，sidenav會丟失背景顏色。如果我點擊sidenav中的鏈接，它會返回。菜單在屏幕上丟失背景顏色

我使用這個CSS（常規）：

.sidenav { 
    position: fixed; 
    /*width set by col2 [16.66%]*/ 
    height: 100%; 
    left: 0; 
    /*top set by $*/ 
    background-color: #2e2e2e; 
}

這個CSS（@media 768）：

.sidenav { 
    width: 0; 
    height: 100%; 
    position: fixed; 
    left: auto; 
    right: 0; 
    z-index: 1; 
    background-color: #2e2e2e; 
    overflow-x: hidden; 
    -webkit-transition: 1s; 
    transition: 1s; 
    padding-top: 15px; 
}

這jQuery的：

if ($(window).width() <= 768) { 
    $("#page-menu").click(function() { 
    $(this).fadeOut(500,function(){ 
    $(this).toggleClass("fa-bars fa-close").fadeIn(500); 
    }); 

    var twidth = $(".sidenav").width() == 0 ? "250px" : "0px"; 

    $(".sidenav").width(twidth); 
    }); 
} 

/*When a link is clicked*/ 
    $(".sidenav a").click(function(){ 
    /*remove all arrows*/ 
    $(".arrow").detach(); 
    /*place arrow on correct link*/ 
    $(this).append('<div class="arrow"></div>'); 

    /*remove active-link class from all*/ 
    $(".sidenav a").removeClass("link-active"); 
    /*place the link-active class on correct link*/ 
    $(this).addClass("link-active"); 

    /*display correct information for link clicked*/ 
    var id = $(this).attr('id'); 
    $(".info>div").each(function(){ 
    if ($(this).hasClass(id)) { 
     $(this).removeClass('hidden'); 
    } 
    else { 
     $(this).addClass('hidden'); 
    } 
    }); 

    if ($(window).width() <= 768) { 
    var twidth = $(".sidenav").width() == 0 ? "250px" : "0px"; 

    $(".sidenav").width(twidth); 
    $("#page-menu").fadeOut(500,function(){ 
     $("#page-menu").toggleClass('fa-bars fa-close').fadeIn(500); 
    }); 
    } 
});

兩個位jQuery與sidenav的寬度混亂。鏈接仍然顯示，但bgc消失了。有沒有人看到可能會發生這種情況？

加載在任何視圖中，我可以旋轉設備，一切都很好：菜單中仍然有bgc。這是當我在肖像模式（移動），打開導航，關閉導航，旋轉到（桌面），bgc消失。

我認爲問題是，當我從手機版關閉菜單時，jQuery將sidenav寬度設置爲0;這個新的寬度現在是一種內聯樣式，它覆蓋了CSS格式。我現在怎樣才能將寬度從jQuery改回CSS？

來源

2017-06-21 Quito Guillermos

因爲您在媒體查詢中設置了'width：0;'.. –

這就是隱藏移動菜單。當它切換回'桌面'時，它應該遵循常規的CSS權利？ –

當然。 ..對不起，我很困惑這個..如果你可以做一個演示它會更好 –

所以我只是一切

if ($(window).width() > 768) { 
    $(".sidenav").width('16.66%'); 
} 
else { 
    $(".sidenav").width(0); 
}

我搞砸與有效寬度內聯將其設置爲它所需要的是後添加的檢查。

來源

2017-06-21 01:46:29

菜單在屏幕上丟失背景顏色

回答

相關問題