Responsive Design - Toggle a Div's Visibility - how to integrate javascript with css @media

问题

I started a previous thread with the same goal but now I have the real question and have created two fiddles jsfiddle #1 AND jsfiddles jsfiddle #2 to show the problem.

I am attempting to use principles of responsive design to adapt to changing screen size. It has these two parts

Use CSS to hide/show a vertical menu div (main-nav-vert) using @media based on browser width.
Use a Menu button to also hide/show the same div main-nav-vert using javascript.

The problem I am having is that I can find a way to integrate the javascript with the @media rules. I am open to another way (but without jQuery)

The Problem: To test these fiddles and see the problem: Reduce the window size to see the impact of @media and it should hide the menu on the left. Expand the window and the menu should reappear. Now shrink the window again until the menu disappears. Click the button and the menu appears. Click the button a second time to hide it. NOW, expanding the window will no longer show the menu.

Try #1 (jsfiddle #1)

javascript changes the same display property of main-nav-vert that @media is changing.
javascript only changes the element NOT the underlying CSS (as shown in the inspector).
The element values set by javascript will take precedence over the CSS property set by @media and so ...
once the button is pressed, the @media settings will no longer work - being overridden.

Try #2 (jsfiddle #2)

javascript alternately sets a new class to the main-nav-vert div (hidden and visible) with each click of the button.
the display property for main-nav-vert set by @media will take precedence over the display property from the hidden class and the button will not hide the menu ... UNLESS
I override the display property by using !important in the visible and hidden classes, but then @media won't work as before.

Please help. There must be a better way. I am looking for a pure js answer, please no jQuery. Thanks.

回答1:

Is this what you need? I am having a hard time understanding what it is you want the links to do here are my two different solutions.

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;
}

回答2:

I found the answer with window.matchMedia and addlistener. Basically, I added a javascript listener for a media query. The javascript fires whenever the condition (screen size) crosses the boundary.

I have posted the jsfiddle with a working solution.

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";
}
}

回答3:

you just need to use window resize event, check your breakpoints and set condition to show/hide

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

来源：https://stackoverflow.com/questions/31172074/responsive-design-toggle-a-divs-visibility-how-to-integrate-javascript-with

标签

javascript

html

css

css3

responsive-design