如何阻止菜单消失

问题描述 投票：0回答：1

我制作了一个菜单，通过单击一个图标，其余图标就会变得可见。然而，它只出现一秒钟，然后就消失了。 当我按下菜单图标时，我希望其余部分始终可见，以便永久更改可见性。由于某种原因，这不起作用。

function showMenu() {
  var len = document.getElementsByClassName("button");
  for (var i = 0; i < len.length; i++) {
    len[i].style.visibility = "visible";
  }
}
.topnav {
  position: fixed;
  width: 98%;
  height: 60px;
  overflow: hidden;
  top: 0;
  border: 2px solid black;
  border-radius: 10px;
  padding: 5px;
  background-color: white;
  opacity: 0.5;
}

.topnav:hover {
  opacity: 1.0;
}

.material-symbols-outlined {
  transform: scale(2);
}

#welcome {
  margin-top: 80px;
}

.button {
  float: left;
  color: #000000;
  text-align: center;
  padding-top: 12px;
  text-decoration: none;
  height: 50px;
  width: 130px;
  margin-right: 5px;
  visibility: hidden;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  text-decoration: underline;
  font-weight: bold;
}

.topnav a#active {
  background-color: #4bc497;
}

.topnav-right {
  float: right;
}
<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<div class="topnav">
  <a href="" style="visibility: visible;" onclick="showMenu()" class="button"><span class="material-symbols-outlined">menu</span></a>
  <a href="home.html" id="active" class="button">Home</a>
  <a href="aboutme.html" class="button">About Me</a>
  <a href="projects.html" class="button">Projects</a>
  <a href="contact.html" class="button">Contact Me</a>
  <div class="topnav-right">
    <a href="home.html" class="button"><span class="material-symbols-outlined">home</span></a>
    <a href="aboutme.html" class="button"><span class="material-symbols-outlined">person</span></a>
    <a href="projects.html" class="button"><span class="material-symbols-outlined">workspaces</span></a>
    <a href="contact.html" class="button"><span class="material-symbols-outlined">contact_mail</span></a>
  </div>
</div>

javascript html css
1个回答
0
投票

<!DOCTYPE html>
<html lang="en">

<head>
<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Example</title>
  <style>
    .topnav {
      position: fixed;
      width: 98%;
      height: 60px;
      overflow: hidden;
      top: 0;
      border: 2px solid black;
      border-radius: 10px;
      padding: 5px;
      background-color: white;
      opacity: 0.5;
    }

    .topnav:hover {
      opacity: 1.0;
    }

    .material-symbols-outlined {
      transform: scale(2);
    }

    #welcome {
      margin-top: 80px;
    }

    .button {
      float: left;
      color: #000000;
      text-align: center;
      padding-top: 12px;
      text-decoration: none;
      height: 50px;
      width: 130px;
      margin-right: 5px;
      visibility: hidden;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
      text-decoration: underline;
      font-weight: bold;
    }

    .topnav a#active {
      background-color: #4bc497;
    }

    .topnav-right {
      float: right;
    }
  </style>
</head>

<body>
  <div class="topnav">
    <a href="#" style="visibility: visible;" onclick="showMenu(event)" class="button"><span
        class="material-symbols-outlined">menu</span></a>
    <a href="home.html" id="active" class="button">Home</a>
    <a href="aboutme.html" class="button">About Me</a>
    <a href="projects.html" class="button">Projects</a>
    <a href="contact.html" class="button">Contact Me</a>
    <div class="topnav-right">
      <a href="home.html" class="button"><span class="material-symbols-outlined">home</span></a>
      <a href="aboutme.html" class="button"><span class="material-symbols-outlined">person</span></a>
      <a href="projects.html" class="button"><span class="material-symbols-outlined">workspaces</span></a>
      <a href="contact.html" class="button"><span class="material-symbols-outlined">contact_mail</span></a>
    </div>
  </div>

  <script>
    function showMenu(event) {
      event.preventDefault(); // Prevent the default behavior of the anchor element
      var len = document.getElementsByClassName("button");
      for (var i = 0; i < len.length; i++) {
        len[i].style.visibility = "visible";
      }
    }
  </script>
</body>

</html>

问题似乎出在单击时锚点 () 元素的默认行为。默认情况下，单击锚元素 () 将导航到 href 属性中指定的 URL。为了防止这种默认行为并使菜单项永久可见，您可以在 showMenu() 函数中使用 event.preventDefault() 方法。 我在 showMenu() 函数中添加了 event.preventDefault() 以防止锚元素的默认行为。这将确保单击“菜单”图标时菜单项保持可见。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.