菜單仍顯示更改@media查詢

我有2個側欄（側欄和側欄移動版）。第一個邊欄我想看到它時，屏幕寬度> 768px，所以我這樣做。菜單仍顯示更改@media查詢

@media only screen and (min-width: 768px){ 
     .side-bar{ 
      display: block; 
     } 
     .side-bar-mobile{ 
      display: none; 
     } 
}

而當屏幕在寬度< 768px，側欄是隱藏和側杆的移動是顯示切換當我點擊的按鈕。
CSS

@media only screen and (max-width: 768px){ 
     .side-bar{ 
      display: none; 
     } 
     .side-bar-mobile{ 
      display: none; 
     } 
}

$('#toggle-menu').on('click', function(e){ 
     $('.side-bar-mobile').slideToggle(); 
     e.preventDefault(); 
})

側邊欄的移動是滑好。但是，當我調整我的窗口正常大小（寬度> 768px），側欄移動仍然顯示。我現在能做什麼？我認爲slidetoggle函數的問題，它使我調整窗口時顯示側欄移動。但我無法解決這個問題。幫我！謝謝。

來源

2015-04-01 Pham Minh Tan

：塊; }' – dsharew 2015-04-01 07:29:17

這可能是因爲slideToggle在顯示時將'style =「display：block;」'添加到'.side-bar-mobile'。這種內聯樣式已經超越了您在CSS文件中設置的規則。其中一種方法是刪除內聯樣式，並在slideToggle的完整功能中添加一個將'.side-bar-mobile'設置爲'display：block;'的類。 – 2015-04-01 07:40:28

感謝隱藏的霍布斯。所以根據你的評論。我應該在jQuery中使用removeAttr（「style」）？ – 2015-04-01 07:56:40

當屏幕寬度> 768時，無論如何都必須隱藏側欄移動設備。

所以爲了做到這一點，你需要註冊窗口調整監聽器是這樣的：

window.onresize = function(){ 
    var h = window.innerHeight 
      || document.documentElement.clientHeight 
      || document.getElementsByTagName('body')[0].clientHeight; 
    var w = window.innerWidth 
      || document.documentElement.clientWidth 
      || document.getElementsByTagName('body')[0].clientWidth; 

    if(w > 768){ 
     $('.side-bar-mobile').css({display:"none"}); 
    } 
}

來源

2015-04-01 07:30:43 dsharew

也把窗口大小調整狀態。根據你的問題側杆的移動必須媒體屏幕<768`.side杆移動{ 顯示器上顯示嘗試這一個

$(function(){ 
var nb = $('#toggle-menu'); 
var n = $('.side-bar'); 

$(window).on('resize', function(){ 
if(nb.is(':hidden') && n.is(':hidden') && $(window).width() >768) { 
$('.side-bar').show().addClass('keep-nav-closed'); 
} 
});

來源

2015-04-01 08:41:00

菜單仍顯示更改@media查詢

回答

相關問題