防止JS搞乱我的媒体特定样式表

Question

我有一个div #example和一个按钮#toggle。当你点击#toggle时，#example通过javascript被隐藏。当你再次点击它时显示。

我也有隐藏这两个元素的屏幕尺寸小于500px的移动设备的样式表。

问题是：我点击#toggle两次，然后调整我的浏览器到< 500px。然后它显示#example，尽管样式规则。问题是JavaScript覆盖了这个规则。

我该如何解决这个问题？

<style media="all and (max-width: 500px)"> 
    #example, #toggle { 
    display: none; 
    } 
</style> 

<div id="example"> 
    Example div 
</div> 
<button id="toggle" onclick="toggle()"> 
    Show/Hide 
</button> 

<script> 
    shown = true; 
    function toggle() { 
    if (shown) { 
     document.getElementById("example").style.display="none"; 
     shown = false; 
    } 
    else { 
     document.getElementById("example").style.display="block"; 
     shown = true; 
    } 
    } 
</script> 

Answer 1

该解决方案是简单

尝试添加类例如is-hidden而不是改变JS中的样式。 这里是解决方案：http://jsfiddle.net/70djv1Lu/

这是最好的做法，因为CSS代码应该在css文件中。