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

问题描述

我开始了同一目标的上一个线程，但现在我有真正的问题，并创建了两个fiddles AND jsfiddles 来显示问题。

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

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




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

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

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

尝试＃1
（）

• javascript更改 显示属性 main-nav-vert @media


• javascript只更改元素而不是基础CSS（如检查器中所示）。


• 由javascript设置的元素值优先于由 @media 设置的CSS属性，因此...


• 一旦按下按钮， @media 设置将不再工作 - 被覆盖。

尝试＃2
（）



• javascript交替设置一个新类到 main-nav-每次单击按钮时， div div（ hidden 和 visible >
  
• 显示属性 main-nav-vert 由 隐藏类中的显示属性优先于不会隐藏菜单... UNLESS


• 使用覆盖显示类中的可见和隐藏，但 @media 将不会像以前那样工作。



请帮助。必须有一个更好的方法。我正在寻找一个纯js的答案，请没有jQuery。感谢。

解决方案

我发现了 window.matchMedia code> addlistener 。基本上，我为媒体查询添加了一个javascript侦听器。每当条件（屏幕大小）越过边界时，JavaScript就会触发。

我已发布 $ b

 < div class =page-container> 
< div class =div-menu-toggleid =div-menu-toggle> 
< button type =buttononClick =showmenu（）;>菜单< / button> 
< / div> 
< div class =main-nav-vert visibleid =main-nav-vert> 
< ul class =nav-vert> 
< li>< a href =＃>链接1< / a>< / li> 
< li>< a href =＃>链接2< / a>< / li& 
< li>< a href =＃>链接3< / a>< / li> 
< / ul> 
< / div> 
< div class =main-contentid =main-content> 
 Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。它不仅存活了五个世纪，而且飞跃到电子排版，基本保持不变。它在20世纪60年代得到普及，发布了包含Lorem Ipsum段落的Letraset表，最近还出现了包括版本Lorem Ipsum在内的桌面出版软件，如Aldus PageMaker。 
这是一个长期以来的事实，一个读者将分心注意页面的可读内容，当看看它的布局。使用Lorem Ipsum的意义在于它具有更多或更少正常的字母分布，而不是使用内容在这里，内容在这里，使它看起来像可读的英语。许多桌面出版软件包和网页编辑器现在使用Lorem Ipsum作为其默认模型文本，搜索lorem ipsum将揭示许多仍处于初级阶段的网站。多年来，有时是偶然的，有时是有意的（注入幽默等）发展了各种版本。 
< / div> 
< / div> 
  

css

pre> .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）{
 //窗口宽度小于480px 
 //显示菜单按钮
 button.style.display =block; 
 if（keepOpen == false）{
 //如果keepOpen标志未设置，隐藏菜单
 menu.style.display =none; 
 //设置主内容的左边距以填充屏幕
 content.style.marginLeft =2px; 
} 
} 
 else {
 //窗口宽度至少为480px 
 //隐藏菜单按钮
 button.style.display =none ; 
 //如果显示菜单
 menu.style.display =block; 
 //设置主内容的左边距以获得空间
 content.style.marginLeft =145px; 
} 
} 
 
 function showmenu（）{
 var menu = document.getElementById（'main-nav-vert'）; 
 var content = document.getElementById（'main-content'）; 
 //点击菜单按钮
 if（menu.style.display ==block）{
 //如果菜单已经打开，隐藏它
 menu.style .display =none; 
 keepOpen = false; 
 //设置主内容的左边距以填充屏幕
 content.style.marginLeft =2px; 
} 
 else {
 //菜单已关闭 - 显示菜单
 menu.style.display =block; 
 //设置一个打开的标志
 keepOpen = true; 
 //设置主内容的左边距以获得空间
 content.style.marginLeft =145px; 
} 
} 
  

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.

解决方案

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

这篇关于响应设计 - 切换一个Div的可见性 - 如何集成javascript与css @media的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！