如果視圖端口被調整大小，如何顯示以前隱藏的div？

我正在開發一個使用Bootstrap 3的響應站點。我有一個JS顯示/隱藏腳本，當屏幕是max-width 767px時可用，但是如果我已經顯示並隱藏了該尺寸的div，當我將屏幕調整回到桌面div仍然隱藏。如果視圖端口被調整大小，如何顯示以前隱藏的div？

如果屏幕超出了767px，那麼是否有迫使div回來？

<script type="text/javascript"> 
    function showFunction() { 
     document.getElementById("left-col").style.visibility="visible"; 
    } 

    function hideFunction() { 
     document.getElementById("left-col").style.visibility="hidden"; 
    } 
</script>

來源

2014-10-16 KlydeMonroe

請提供代碼示例請 – n0mercy 2014-10-16 10:44:59

我只是使用基本的getElementbyID並將顯示更改爲無或塊，目標是使用類visible-xs，以便它只在max-width767px處可見我需要某些東西來重置div風格與screenize是事件？ – KlydeMonroe 2014-10-16 10:56:41

爲什麼你不能只用CSS媒體查詢呢？ – charlietfl 2014-10-16 10:59:51

爲什麼不使用媒體查詢呢？

@media (max-width: 767px) { 
    .left-col { 
    display: none; 
    } 
}

http://jsfiddle.net/x9y1s14o/

來源

2014-10-16 15:05:17

嗨，讓我再次開始 - 我有一個左側col div是桌面視圖中的左側col，但是在移動視圖中，我使用媒體查詢隱藏了它。但是我想在點擊移動設備中的按鈕時顯示左欄 - 這樣它就像菜單中的幻燈片一樣，寬度爲屏幕的75％，這很好，我有這個工作。但是，如果我將瀏覽器最小化爲手機大小，然後單擊'顯示'左側col（此作品），然後單擊關閉左側col（隱藏它），當我將瀏覽器大小更改回到桌面左col仍然隱藏，不想要。即使它已被隱藏，我也希望它能夠恢復。謝謝 – KlydeMonroe 2014-10-21 11:57:47

一般來說，有兩種方法可以做到這一點：

使用CSS來迫使格在一個大小來顯示，而在另一個
使用JavaScript隱藏在瀏覽器中偵聽更改，然後調用函數以修改dom的狀態

通過CSS，您可以告訴瀏覽器當窗口大於斷點時該做什麼，以及當窗口小於斷點時該做什麼，該斷點爲767 px。

@media (min-width: 767px) { 
    .left-col { 
    visibility: visible; 
    } 
} 

@media (max-width: 767px) { 
    .left-col { 
    visibility: hidden; 
    } 
}

使用JavaScript，你告訴瀏覽器調用一個函數，當調整窗口大小：

var breakpoint = 767; 
window.onresize = function(event) { 
    if (window.innerWidth >= breakpoint) { 
     showFunction(); 
    } else { 
     hideFunction(); 
    } 
};

注：您的具體情況可能會略有不同，但這是爲了說明它背後的想法。調整你需要的細節。

來源

2015-04-19 15:26:04

如果視圖端口被調整大小，如何顯示以前隱藏的div？

回答

相關問題