使用媒体查询时遇到问题。我有一个网页，分为3个部分。根据屏幕分辨率或可用宽度，将显示区域。例如，对于小于或等于1024的分辨率，仅显示3个区域中的2个。在小于或等于480的分辨率下，仅显示3个区域中的1个。显示大于1024的分辨率，所有三个区域。每个部分都可以再次展开和折叠。
示例演示可以在这里看到http://jsfiddle.net/44QB3/
我写了这段代码
<!DOCTYPE html>
<html>
<head>
<title>Inventory details</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
}
.container {
padding-top: 50px;
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0px 10px;
height: 100%;
}
.leftPanel {
width: 34%;
height: 100%;
overflow: hidden;
margin-right: 20px;
float: left;
position: relative;
}
.centerPanel {
width: calc(33% - 20px);
width: -webkit-calc(33% - 20px);
width: -moz-calc(33% - 20px);
height: 100%;
overflow: hidden;
margin-right: 20px;
float: left;
position: relative;
}
.rightPanel {
width: calc(33% - 20px);
width: -webkit-calc(33% - 20px);
width: -moz-calc(33% - 20px);
height: 100%;
overflow: hidden;
position: relative;
}
.headerPanel-Style {
height: 25px;
padding: 5px 0px;
border-bottom: 1px solid #cfcece;
}
.bodyPanel-Style {
height: calc(100% - 36px);
height: -webkit-calc(100% - 36px);
height: -moz-calc(100% - 36px);
overflow-y: scroll;
}
.panel-Sidebar {
width: 20px;
height: 100%;
background: #cfcece;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.toggleButton {
width: 18px;
height: 18px;
border: 1px solid #cfcece;
background: white;
cursor: pointer;
}
@media screen and (max-width: 1024px) {
.leftPanel {
width: 60%;
}
.centerPanel {
margin-right: 10px;
width: calc(40% - 50px);
width: -webkit-calc(40% - 50px);
width: -moz-calc(40% - 50px);
}
.rightPanel {
width: 20px;
}
.rightPanel .panel-Header {
display: none;
}
.rightPanel .panel-Body {
display: none;
}
.rightPanel .panel-Sidebar {
display: block;
}
}
@media screen and (max-width: 480px) {
.leftPanel {
margin-right: 10px;
width: calc(100% - 60px);
}
.centerPanel {
width: 20px;
}
.centerPanel .panel-Header {
display: none;
}
.centerPanel .panel-Body {
display: none;
}
.centerPanel .panel-Sidebar {
display: block;
}
}
.leftPanel-Collapse {
width: 20px;
}
.leftPanel-Header-Collapse {
display: none;
}
.leftPanel-Body-Collapse {
display: none;
}
.leftPanel-Sidebar-Show {
display: block;
}
.centerPanel-Expand {
width: calc(100% - 60px);
width: -webkit-calc(100% - 60px);
width: -moz-calc(100% - 60px);
}
.centerPanel-Header-Expand {
display: block;
}
.centerPanel-Body-Expand {
display: block;
}
.centerPanel-Sidebar-Hide {
display: none;
}
</style>
<script type="text/javascript">
<!--
function init() {
var centerToggle = document.getElementsByClassName("centerPanel")[0].getElementsByClassName("panel-Sidebar")[0].getElementsByClassName("toggleButton")[0];
centerToggle.addEventListener("click", function() {
var leftPanel = document.getElementsByClassName("leftPanel")[0];
var leftPanelHeader = leftPanel.getElementsByClassName("panel-Header")[0];
var leftPanelBody = leftPanel.getElementsByClassName("panel-Body")[0];
var leftPanelSidebar = leftPanel.getElementsByClassName("panel-Sidebar")[0];
leftPanel.setAttribute("class", leftPanel.getAttribute("class") + " leftPanel-Collapse");
leftPanelHeader.setAttribute("class", leftPanelHeader.getAttribute("class") + " leftPanel-Header-Collapse");
leftPanelBody.setAttribute("class", leftPanelBody.getAttribute("class") + " leftPanel-Body-Collapse");
leftPanelSidebar.setAttribute("class", leftPanelSidebar.getAttribute("class") + " leftPanel-Sidebar-Show");
var centerPanel = document.getElementsByClassName("centerPanel")[0];
var centerPanelHeader = centerPanel.getElementsByClassName("panel-Header")[0];
var centerPanelBody = centerPanel.getElementsByClassName("panel-Body")[0];
var centerPanelSidebar = centerPanel.getElementsByClassName("panel-Sidebar")[0];
centerPanel.setAttribute("class", centerPanel.getAttribute("class") + " centerPanel-Expand");
centerPanelHeader.setAttribute("class", centerPanelHeader.getAttribute("class").replace("panel-Header", "") + " centerPanel-Header-Expand");
centerPanelBody.setAttribute("class", centerPanelBody.getAttribute("class").replace("panel-Body", "") + " centerPanel-Body-Expand");
centerPanelSidebar.setAttribute("class", centerPanelSidebar.getAttribute("class").replace("panel-Sidebar", "") + " centerPanel-Sidebar-Hide");
}, false);
}
//-->
</script>
</head>
<body onload="init()">
<div class="container">
<div class="leftPanel">
<div class="headerPanel-Style panel-Header">
Left Panel
</div>
<div class="bodyPanel-Style panel-Body">
</div>
<div class="panel-Sidebar">
<div class="toggleButton">
</div>
</div>
</div>
<div class="centerPanel">
<div class="headerPanel-Style panel-Header">
Center Panel
</div>
<div class="bodyPanel-Style panel-Body">
</div>
<div class="panel-Sidebar">
<div class="toggleButton">
</div>
</div>
</div>
<div class="rightPanel">
<div class="headerPanel-Style panel-Header">
Right Panel
</div>
<div class="bodyPanel-Style panel-Body">
</div>
<div class="panel-Sidebar">
<div class="toggleButton">
</div>
</div>
</div>
</div>
</body>
</html>
我调整浏览器大小时工作正常。但是当我开始扩展和崩溃时，问题就出现了。假设我折叠了一个区域，比如第一个区域，然后我开始稍微扩展窗口，比如1px到2px。现在面板表现出意想不到的行为。
我想要实现的是在使用媒体队列时展开折叠面板。我不想使用jquery和类似的apis。他们被禁止使用。
答案 0 :(得分：0)
为什么要使用javascript ....下面的内容也会解决，不是吗？
@media only screen
and (max-width : 1024px) {
.div_show_1024{
display:block;
}
.div_hide_1024{
display:none;
}
}
@media only screen
and (max-width : 480px) {
.div_show_480{
display:block;
}
.div_hide_480{
display:none;
}
}
现在您要做的就是将这些类分配给相应的div !!!
答案 1 :(得分：0)
var TO = false;
var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
$(window).bind(resizeEvent, function() {
TO && clearTimeout(TO);
TO = setTimeout(resizeBody, 200);
});
function resizeBody(){
var width = window.innerWidth || $(window).width();
if(width<1024)
//some statments here;
}