Question

当我打开网页时，导航栏（位于页脚中）已经打开，但应该隐藏。如果您单击一个图标，它将显示出来；再次单击同一图标时，它将再次隐藏。

代码之所以有效，是因为页脚隐藏并在单击图标时显示，但是唯一需要更改的是在加载网页时应立即隐藏页脚。

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>

Answer 1

您只需要将页脚的初始值设置为“显示：无”：

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

Answer 2

添加

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;
            }

Answer 3

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

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

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

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

希望我帮助了：-）

加载网页时隐藏导航

3 个答案: