javascript - 如何将媒体查询与 javascript 结合起来？-6ren

javascript - 如何将媒体查询与 javascript 结合起来？

转载作者：行者123 更新时间：2023-11-28 11:32:27

我在使用媒体查询时遇到问题。我有一个分为 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; 
          }
        }