logo标签列表

为什么我无法切换汉堡菜单的显示

javascripthtmlcss
3

我正在尝试使用汉堡图标切换 ul 元素的显示，使得当我点击图标时，ul 元素可以显示或隐藏。

这是我的代码:

ul 元素会快速消失并且不能保持可见状态。我想要通过点击汉堡菜单来显示或隐藏 ul 元素。非常感谢您的帮助。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Fashionation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <a href="#">Brand Name</a>
                <ul id="list">
                    <li><a href="">Home</a></li>
                    <li><a href="">New Arrivals</a></li>
                    <li><a href="">Clothes</a></li>
                    <li><a href="">Sales</a></li>
                    <li><a href="">Stores</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
                <a href="" class="menu" id="menu" onclick="displayMenu()"><i class="fa fa-bars fa-2x"></i></a>
            </nav>
        </header>
        
        <script src="script.js"></script>
    </body>
</html>

CSS（层叠样式表）
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
}

body {
    /* background-color: red; */
}
header {
    height: 450px;
    /* background-color: orangered; */
}
nav {
    height: 50px;
    background-color: #262626;
    line-height: 50px;
    position: relative;
}
nav ul {
    /* background-color: orangered; */
    margin-top: 10px;
    margin-bottom: 10px;
    /* display: none; */
}

nav ul li {
    padding: 2px;
    text-align: center;
    
}
a {
    color:  #C70D6C;
}
.menu {
    color: #C70D6C;
    position: absolute;
    top: 6px;
    right: 10px;
    line-height: 50px;
    display: none;
}

@media screen and (max-width: 767.98px) { 
    .menu {
        display: inline-block;
    }

}

JavaScript

function displayMenu() {
    let list = document.getElementById('list');
    if (list.style.display === "none") {
      list.style.display = "block";
    } else {
      list.style.display = "none";
    }
  }
2个回答
2

使用 href="" 会导致页面重新加载。

可以尝试以下解决方案。

<button class="menu" id="menu" onclick="displayMenu()">
<i class="fa fa-bars fa-2x"></i>
</button>

或者

<a style="cursor: pointer" class="menu" id="menu" onclick="displayMenu()">
<i class="fa fa-bars fa-2x"></i>
</a>

如果您使用第二种解决方案，请将内联CSS移动到您的CSS类“menu”中。

2

对于这个特定的任务，不应该使用 a 标签。相反，应该使用 button 标签。将 a 替换为 button，并通过一些样式可以实现完全相同的结果。

function displayMenu(e) {
  let list = document.getElementById('list');
  if (list.style.display === "none") {
    list.style.display = "block";
  } else {
    list.style.display = "none";
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

body {
  /* background-color: red; */
}
header {
  height: 450px;
  /* background-color: orangered; */
}
nav {
  height: 50px;
  background-color: #262626;
  line-height: 50px;
  position: relative;
}
nav ul {
  /* background-color: orangered; */
  margin-top: 10px;
  margin-bottom: 10px;
  /* display: none; */
}

nav ul li {
  padding: 2px;
  text-align: center;
}
a {
  color: #c70d6c;
}
.menu {
  color: #c70d6c;
  position: absolute;
  top: 6px;
  right: 10px;
  height: 2rem;
  width: 2rem;
  background-color: #262626;
  border: none;
}

@media screen and (max-width: 767.98px) {
  .menu {
    display: inline-block;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header>
  <nav>
    <a href="#">Brand Name</a>
    <ul id="list">
      <li><a href="">Home</a></li>
      <li><a href="">New Arrivals</a></li>
      <li><a href="">Clothes</a></li>
      <li><a href="">Sales</a></li>
      <li><a href="">Stores</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>
    <button class="menu" id="menu" onclick="displayMenu()"><i class="fa fa-bars fa-2x"></i></button>
  </nav>
</header>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接