Question

我创建了一个具有相同目标的前一个主题，但现在我有了真正的问题并创建了两个小问题jsfiddle #1 AND jsfiddles jsfiddle #2来显示问题。

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

使用CSS根据浏览器宽度使用t_id隐藏/显示垂直菜单div（main-nav-vert）。
使用菜单按钮也可以使用javascript隐藏/显示相同的div @media。

我遇到的问题是我可以找到一种方法来将javascript与main-nav-vert规则集成。我对另一种方式开放（但没有jQuery）

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

尝试＃1 （jsfiddle #1）

javascript更改了@media正在发生变化的display main-nav-vert属性。
javascript只更改元素而不是基础CSS（如检查器中所示）。
javascript设置的元素值优先于@media设置的CSS属性，因此......
按下按钮后，@media设置将不再有效 - 被覆盖。

尝试＃2 （jsfiddle #2）

javascript都会以@media div（main-nav-vert和hidden）交替设置新课程。
由visible设置的display的{{1}}属性优先于main-nav-vert类的@media属性，该按钮不会隐藏菜单......除非
我在display和hidden类中使用display覆盖!important属性，但visible将不会像以前一样工作。

请帮忙。肯定有更好的办法。我正在寻找一个纯粹的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
    }
};

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

3 个答案: