响应式设计 - 切换 Div 的可见性 - 如何将 javascript 与 css @media 集成

Question

我以相同的目标开始了以前的线程，但现在我有真正的问题，并创建了两个小提琴 jsfiddle #1 和 jsfiddles jsfiddle #2 来显示问题。

我正在尝试使用响应式设计原则来适应不断变化的屏幕尺寸。它有这两部分

• 使用 CSS 隐藏/显示垂直菜单 div (main-nav-vert)，使用基于浏览器宽度的 @media。

• 使用菜单按钮也可以使用 javascript 隐藏/显示相同的 div main-nav-vert。

我遇到的问题是我可以找到一种将 javascript 与 @media 规则集成的方法。我对另一种方式持开放态度（但没有 jQuery）

问题： 要测试这些小提琴并查看问题：减小窗口大小以查看@media 的影响，它应该隐藏左侧的菜单。展开窗口，菜单应重新出现。现在再次缩小窗口，直到菜单消失。单击按钮，出现菜单。再次单击该按钮将其隐藏。现在，展开窗口将不再显示菜单。

试试#1 (jsfiddle #1)

• javascript 更改 main-nav-vert 的相同 display 属性，@media 正在更改。
• javascript 仅更改元素而不是底层 CSS（如检查器所示）。
• javascript 设置的元素值将优先于@media 设置的 CSS 属性，所以...
• 一旦按下按钮，@media 设置将不再起作用 - 将被覆盖。

尝试 #2 (jsfiddle #2)

• 每次单击按钮时，javascript 都会为main-nav-vert div（hidden 和visible）交替设置一个新类。
• @media 设置的main-nav-vert 的display 属性将优先于hidden 类中的display 属性，并且该按钮不会隐藏菜单...除非
• 我通过在visible 和hidden 类中使用!important 来覆盖display 属性，但随后@media 将无法像以前那样工作。

请帮忙。一定会有更好的办法。我正在寻找一个纯 js 的答案，请不要使用 jQuery。谢谢。

Answer 1

这是你需要的吗？我很难理解您希望链接做什么是我的两个不同的解决方案。

css

.main-content {
    max-width:808px; 
    width: auto;
    padding:0 9px 0 9px;
}
.main-nav-vert {
    display: block;
    float:left; 
    width:145px;
    border:solid 2px #00f;
}

.visible{
    display: block !important;
}

.hidden{
    display: none !important;
}

@media (min-width: 450px) {
       #main-nav-vert{
           display: block;
       }
    }
@media (max-width: 449px){
       #main-nav-vert{
           display: none;
       }
        .hidden{
            display: none;
            }
    }

css

.main-content {
    max-width:808px; 
    width: auto;
    padding:0 9px 0 9px;
}
.main-nav-vert {
    display: block;
    float:left; 
    width:145px;
    border:solid 2px #00f;
}

.visible{
    display: block !important;
}

.hidden{
    display: none !important;
}

@media (min-width: 450px) {
       #main-nav-vert{
           display: block;
       }
    }
@media (max-width: 449px){
       #main-nav-vert{

           display: none !important;
       }
    }

#main-nav-vert{
     display: none;
}

Answer 2

我通过window.matchMedia 和addlistener 找到了答案。基本上，我为媒体查询添加了一个 javascript 侦听器。只要条件（屏幕大小）越界，javascript就会触发。

我在the jsfiddle 上发布了一个可行的解决方案。

html

<div class="page-container">
    <div class="div-menu-toggle" id="div-menu-toggle">
    <button type="button" onClick="showmenu();">Menu</button>
    </div>
    <div class="main-nav-vert visible" id="main-nav-vert">
    <ul class="nav-vert">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    </div>
    <div class="main-content" id="main-content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
    </div>

css

.main-nav-vert{
    display: block;
    float:left; 
    width:145px;
    border:solid 2px #00f;
}

.div-menu-toggle{
    display: none;
}

.main-content{
    max-width:808px; 
    width: auto;
    padding:0 9px 0 9px;
    margin-left: 145px;
}

javascript

var jmq = window.matchMedia( "(max-width: 480px)" )
var keepOpen = false;

jmq.addListener(jmqListener);
window.onload = function() {
jmqListener(jmq);
};   

function jmqListener(jmq){
var button = document.getElementById('div-menu-toggle');
var menu = document.getElementById('main-nav-vert');
var content = document.getElementById('main-content');
if (jmq.matches) {
    // window width is less than 480px
    //show menu button
    button.style.display = "block";
    if (keepOpen == false){
    // if keepOpen flag is not set, hide the menu
    menu.style.display = "none";
    // set left margin of main-content to fill screen
    content.style.marginLeft = "2px";
    }       
}
else {
    // window width is at least 480px
    //hide menu button
    button.style.display = "none";
    // if show the menu
    menu.style.display = "block";
    // set left margin of main-content to make room
    content.style.marginLeft = "145px";
}    
}

function showmenu() {
var menu = document.getElementById('main-nav-vert');
var content = document.getElementById('main-content');
// with click on menu button
if(menu.style.display == "block"){
    // if menu is already open, hide it
    menu.style.display = "none";
    keepOpen = false;
    // set left margin of main-content to fill screen
    content.style.marginLeft = "2px";
}
else {
    // menu is closed - show the menu
    menu.style.display = "block";
    // set a flag that it is open
    keepOpen = true;
    // set left margin of main-content to make room
    content.style.marginLeft = "145px";
}
}

Answer 3

你只需要使用窗口调整大小事件，检查你的断点并设置条件来显示/隐藏

window.onresize = function(event) {
    if(window.innerWidth > 768)
    {
        // hide menubar
    }else{
       // show menubar
    }
};