加载网页时隐藏导航

Posted 2021-04-27

当我打开我的网页时，导航栏（位于页脚）已经打开，而它应该被隐藏。如果您单击图标将显示，并在再次单击相同的图标时再次隐藏。

代码正常工作，因为页脚隐藏并在单击图标时显示，但唯一应该更改的是页脚应该在加载网页时立即隐藏。

var mijnKnop = document.getElementById("toggleMenu");
console.log(mijnKnop);

var mijnMenu = document.getElementById("navigatie");
console.log(mijnMenu);

var toggleStatus = 1;
console.log('status begin:' + toggleStatus);


mijnKnop.addEventListener("click", function() {
  console.log('mijnknop click event');
  if (toggleStatus == 1) {
    console.log('status is 1');
    mijnMenu.style.display = "none";

    toggleStatus = 0;
  } else if (toggleStatus == 0) {
    console.log('status is 0');
    mijnMenu.style.display = "flex";

    toggleStatus = 1;
  }

});

footer {
  width: 100vw;
  height: 8vh;
  background-color: #ededed;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  font-size: 1.7rem;
  font-family: 'Concert One', cursive;
  text-align: center;
}

li {
  display: inline-block;
  color: #847d7d;
  margin: 0 100px 0 100px;
}

a {
  text-decoration: none;
  color: black;
  opacity: 0.5;
}

a:hover {
  opacity: 1;
}

<div class="foto"></div>
<div id="toggleMenu"></div>

<footer id="navigatie">
  <nav>
    <ul>
      <li>
        <a href="#">Who are we</a>
      </li>

      <li>
        <a href="#">History</a>
      </li>
    </ul>
  </nav>
</footer>

答案

加

mijnMenu.style.display = "none";

后

 var mijnMenu = document.getElementById("navigatie");

并改变这一点

if (toggleStatus == 1) {
      console.log('status is 1');
    mijnMenu.style.display = "none";

    toggleStatus = 0;
 }

else if (toggleStatus == 0) {
      console.log('status is 0');
    mijnMenu.style.display = "flex";

    toggleStatus = 1;
}

对此

if (toggleStatus == 1) {
                console.log('status is 1');
                mijnMenu.style.display = "flex";

                toggleStatus = 0;
            }

            else if (toggleStatus == 0) {
                console.log('status is 0');
                mijnMenu.style.display = "none";

                toggleStatus = 1;
            }

另一答案

您只需要将页脚的初始值设置为“display：none”：

<footer id="navigatie" style="display: none">

另一答案

如果你在谈论“网页加载”的一般意义，那么你需要做的就是将你的display元素的footer设置为none： -

<footer id="navigate" style="display: none;">

如果您的意思是“页面加载”，即加载页面时触发的事件，请将以下代码添加到javascript的末尾：

addEventListener('load', function() {
    document.getElementById('navigate').style.display = 'none';
});

希望我帮忙:-)