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

Question

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

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

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

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

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

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

尝试#1( jsfiddle #1 )

• javascript 更改 @media 正在更改的 main-nav-vert 的相同 display 属性。
• javascript 仅更改元素而不更改底层 CSS(如检查器中所示)。
• javascript 设置的元素值将优先于 @media 等设置的 CSS 属性 ...
• 一旦按下按钮，@media 设置将不再有效 - 被覆盖。

尝试#2( jsfiddle #2 )

• javascript 会在每次单击按钮时为 main-nav-vert div(hidden 和 visible)交替设置一个新类。
• 由 @media 设置的 main-nav-vert 的 display 属性将优先于 display hidden 类的属性和按钮将不会隐藏菜单...除非
• 我通过在 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;
}