Question

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

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

问题是：我点击#toggle两次，然后将我的浏览器调整为＆lt; 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文件中。

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

1 个答案: