Question

对长篇大论的问题道歉，但任何帮助都会非常感激！

我在网站上有一个导航div，当屏幕变小时，使用媒体查询替换为菜单按钮时会消失。菜单按钮使用JavaScript显示和隐藏菜单。

除了一个我无法弄清楚的小错误之外，这一切都有效，这有点难以解释所以我会指出它 -

1）打开小浏览器窗口，按钮显示 2）使用按钮打开和关闭菜单 3）最大化屏幕 4）按钮消失（它应该）但菜单不再出现。

您可以在此处查看实时示例 - http://andrewbruce.me

我会将相关代码放在下面 -

var clicks = 0;

function decide(x) {
    if (clicks == 0) {
        document.getElementById("nav").style.visibility = "visible";
        document.getElementById("nav").style.opacity = "1";
        x.classList.toggle("change");
        clicks = 1;
    }

    else if (clicks == 1) {
        document.getElementById("nav").style.visibility = "hidden";
        document.getElementById("nav").style.opacity = "0";
        x.classList.toggle("change");
        clicks = 0;
    }
}

#nav {
height: 100%; 
width: 22%;
text-align: center;
box-shadow: 2px 2px 5px #888888;
visibility: visible;
opacity: 1;
transition: all .3s ease-in-out;
background-color: #1b1d1f;
float: left;
position: fixed;
z-index: 2;}

@media handheld, screen and (max-width: 1000px) {
#nav {width: 40%; visibility: hidden; opacity: 0;}
.menuButton {visibility: visible;}
}

<div class="menuButton" onclick="decide(this);">
  <div id = "bar1"></div>
  <div id = "bar2"></div>
  <div id = "bar3"></div>
</div>

Answer 1

试试这个。

我希望有所帮助。

  @media (min-width: 1000px){
   #nav{
   opacity:1!important;
   visibility: visible!important;
   }
 }

Answer 2

您不应该通过此方法更改样式document.getElementById("nav").style，它会添加内联样式并覆盖您的属性。而是使用这些属性创建一个类，然后使用脚本来切换它。

例如：

CSS

.nav-hidden {
  visibility: hidden;
  opacity: 0;
}

JS

element.classList.add("nav-hidden");
element.classList.remove("nav-hidden");

Answer 3

在JS下面使用

window.addEventListener("resize", menuChange);
function menuChange() {
   if (window.innerWidth > 999){
      document.getElementById("nav").style.visibility = "visible";
      document.getElementById("nav").style.opacity = "1";
      x.classList.toggle("change");
   }
}

当屏幕变大时，我的导航div不再出现

3 个答案: