Question

我正在构建自适应导航，因此我有一个按钮，可以通过 Javascript 更改div #navigation 的样式。（在display: none;和display: block;之间切换。在小屏幕上它完美地工作。但是，当我在小屏幕上显示和隐藏导航并在其后调整窗口大小时，导航仍然是隐藏的。

如果窗口有一定的大小，有没有办法自动更改css？

这是我正在使用的代码（顺便说一下：我是Javascript的新手）再次：看看当你使窗口变小，打开和关闭导航并再次调整窗口大小时会发生什么。导航是（不是想要的）仍然隐藏： http://codepen.io/HannesDev/pen/grjdqK

HTML：

<div class="btn-Nav">Navigation</div>
<nav id="nav-hor" role="navigation">
<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
 </ul>
</nav><!-- #site-navigation -->

CSS：

html{
  background: lime;
}
/* The Button */
.btn-Nav{
  border: 2px solid grey;
  cursor: pointer;

}
/* The button changes to the greyed out closed area on the right */
.btn-Nav_open{
  position: fixed;
  margin-left: 80vw;
  left: 0;
  top: 0;
  width: 20vw;
  height: 100vh;
  background-color: black;
  color: white;
  opacity: .2;
  padding: .2em;
  text-align: center;
  font-size: 3em;
}

/* The Navigation on small screens */
#nav-hor{
  display: none;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  width: 80vw;
  height: 100vh;
  background-color: white;
  z-index: 999;
  border-right: 1px solid grey
}


@media (min-width: 50em) { 
  html{
    background: red;
  }
  /* Don't show the button on bigger screens */
  .btn-Nav{
    display: none;
  }

 /* The Navigation for bigger screens */
  #nav-hor {
    /* Clean up */
    display: flex;
    position: relative;
    overflow: visible;
    width: 100%;
    height: auto;

}

JS：

window.onload = function(){
  document.querySelector('.btn-Nav').onclick = function(){
    // closed
      if(this.className.match('btn-Nav btn-Nav_open')) {
          this.className = 'btn-Nav';
          document.getElementsByClassName("btn-Nav")[0].innerHTML = "Navigation";
          document.getElementById('nav-hor').style.display = "none";
          document.body.style.overflow = "auto";

      }
      // open
      else {
          this.className = 'btn-Nav btn-Nav_open';

          document.getElementsByClassName("btn-Nav")[0].innerHTML = "&#215;";
          document.getElementById('nav-hor').style.display = "block";
          document.body.style.overflow = "hidden";
      }
  };
};

Answer 1

如果窗口有一定的大小，有没有办法自动更改css？

但是，绝对不需要Javascript来执行此操作。 CSS提供了一种称为媒体查询的东西，它允许您根据特定条件更改元素的样式。对于你的具体情况，有一些类似

的内容

@media only screen and (max-width: 500px) {
    #navigation {
        display: block;
    }
}

仅当浏览器窗口小于500px时，才会将#navigation元素的显示更改为阻止。绝对可以更改最大宽度值。您可以使用媒体查询执行其他一些非常棒的操作，可以在以下位置找到它们的示例：http://www.w3schools.com/css/css_rwd_mediaqueries.asp。

在某个断点处通过JS自动更改CSS

1 个答案: