我在使用媒体查询时遇到问题。我有一个分为 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 和类似的 api。他们被禁止使用。
最佳答案
为什么要使用 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!!!
关于javascript - 如何将媒体查询与 javascript 结合起来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21087333/