Javascript 汉堡菜单在页面加载时打开_Javascript_Html

Javascript 汉堡菜单在页面加载时打开

javascript html

Javascript 汉堡菜单在页面加载时打开,javascript,html,Javascript,Html,我有一个问题，我的汉堡包菜单是打开页面加载。除此之外，它还可以根据需要工作。如果我点击它，它会关闭，然后再次点击打开 <div class="topnav"> <a href="#home" class="active">Dashboard</a>  <div id="nav"> <a href="

我有一个问题，我的汉堡包菜单是打开页面加载。除此之外，它还可以根据需要工作。如果我点击它，它会关闭，然后再次点击打开

<div class="topnav">
  <a href="#home" class="active">Dashboard</a>
  <!-- Navigation links (hidden by default) -->
  <div id="nav">
                <a href="/index.php"><i class="fas fa-user-circle"></i>Profile</a>
                <a href="../user/invoices.php"><i class="fas fa-user-circle"></i>Invoices</a>
                <a href="/post"><i class="fas fa-user-circle"></i>Post Message</a>
                <a href="/register"><i class="fas fa-user-circle"></i>New User</a>
                <a href="/logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void();" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script>
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
  var x = document.getElementById("nav");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

在上述脚本中，是什么导致了此问题？我已经到处找过了。javascript看起来是正确的，但我显然遗漏了一些东西

您需要将此添加到css中：

#nav{
  display:none;
}

默认情况下，它将隐藏您的

#nav

div

，即在页面加载时。或者，您可以使用Javascript在页面加载时隐藏

#nav

，方法是添加：

// self executing function
(function() {
      var x = document.getElementById("nav");
      x.style.display = "none";
})();

这将使您的

myFunction（）方法已准备好用于页面加载
因为这样的菜单通常是合适的，并且因为它只有4条附加的行，所以您可能需要考虑使用这第三种方法，如果页面被重新加载，它将保持菜单的切换状态：
// self executing function
(function() {
    if(window.localStorage.getItem('nav') === null){
      window.localStorage.setItem('nav', 'none');
    }
    var x = document.getElementById("nav");
    x.style.display = window.localStorage.getItem('nav');
})();

function myFunction() {
    var x = document.getElementById("nav");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
    window.localStorage.setItem('nav', x.style.display);
}

您可以像这样使用CSS：
#nav{
  display:none;
}

<body onload="onload()">

但如果你想在身体负重时做些什么，你可以添加如下功能：
#nav{
  display:none;
}

<body onload="onload()">

在这里查看：
非常感谢您！我不知道我是怎么错过的。。工作得很有魅力。@DavidMorin没问题！这就是答案，但是如果您还添加了JS调用，使他的myFunction
方法在窗口加载时工作，那么它将更加完整。也许，有人想要一个完整的JS解决方案，在这里看起来很傻，但它可能没有问题，你是对的，它可能是有用的，我会编辑你的函数myFunction
不会调用，除非点击你的图标，因此它永远不会在页面加载时运行。。。调用doc ready或使用@francois的解决方案