创建汉堡菜单。我使用了onclick来隐藏和显示导航项，但是改变屏幕大小后，导航项不会显示或不能灵活地伸缩。

Question

我正在尝试在移动端视图中创建一个汉堡菜单。当进入移动端视图时，导航项会被隐藏起来，当我点击菜单图标时，导航项将会显示。但是，在点击图标并更改屏幕尺寸后，导航项会消失，或者其“display:flex”样式会失效。

作为一个前端新手，我在这一部分遇到困难。

const nameOfElement = document.querySelector(".nav-items")
var dd = "closed"

function dropdown() {
  nameOfElement.style.display = "flex";
  if (dd == "closed") {
    nameOfElement.style.display = "block";
    dd = "opened";
  } else {
    nameOfElement.style.display = "none";
    dd = "closed";
  }
}

.wrapper {
  background: white;
  margin: 0 0;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 0px 2px 11.3px 0px rgba(0, 0, 0, 0.02);
}

nav {
  display: flex;
  justify-content: space-around;
  padding-left: 64px;
  padding-right: 64px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-items {
  display: flex;
  justify-content: space-around;
  gap: 32px;
}

ul {
  list-style-type: none;
  display: flex;
  gap: 32px;
  padding: 0;
}

li {
  padding-left: 8px;
  padding-right: 8px;
}

li a {
  text-decoration: none;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: gray;
}

li a:hover {
  color: black;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  width: 150px;
  height: 42px;
  padding: 10px 20px;
  background: #A900E4;
  color: white;
  border: 0;
  border-radius: 4px;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.hamburger {
  display: none;
}

@media screen and (max-width: 768px) {
  nav {
    flex-direction: column;
    align-content: center;
  }
  .nav-items {
    flex-direction: column;
    gap: 8px;
    display: none;
  }
  .logo {
    margin-top: 16px;
  }
  ul {
    flex-direction: column;
    justify-content: center;
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .logo {
    display: flex;
    justify-content: space-between;
  }
  li {
    text-align: center;
  }
  .links {
    display: flex;
    justify-content: center;
  }
  .button {
    margin-bottom: 32px;
  }
  .hamburger {
    display: block;
  }


  
    
      Hello
      
        
      
    
    
      
        Home
        About Me
        My Works

tony19 · Answer

我刚刚查看了你的代码，其中指出当屏幕尺寸小于或等于768px时显示汉堡菜单（即隐藏式导航菜单），而大于768px时设置其为display:none。

@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
  }
}

这就是汉堡菜单会消失的原因。

Billy ONeal · Answer

我不喜欢直接通过元素名称来设置样式，因此我添加了类来进行样式控制。此外，我还设置了一个针对 (min-width: 768px) 的媒体查询，这样一来，在大屏幕设备上，汉堡菜单将会被隐藏，元素始终保持显示状态。我还基于默认字体大小 font-size:16px （等于 1em，这是大多数浏览器的默认值）将单位转换为了 em。

现在重点是，我随后使用了带有值的数据属性，这样我就可以在 CSS 中利用这个属性来控制菜单显示/隐藏，而不是直接通过 JavaScript 修改样式，因为随着屏幕尺寸的变化，直接修改样式的做法较为复杂。这种改进方法简化了实现方式，仅使用 CSS 就能保持根据汉堡菜单点击来切换菜单的显示与隐藏功能。

最后一个小修复是在媒体查询结尾处加上了终止的 } 符号，尽管这可能只是个笔误。

//const nameOfElement = document.querySelector(".nav-items");
//var dd = "closed";
var hamburgerIcon = document.querySelector(".hamburger").querySelector(".hamburger-icon");

hamburgerIcon.addEventListener("click", (event) => {
  const nav = document.querySelector(".nav-items");
  var navStyle = nav.dataset.menustyle;
  nav.dataset.menustyle = navStyle == "closed" ? "opened" : "closed";
});

* {
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

.wrapper {
  background: white;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  box-shadow: 0em 0.125em 0.75em 0em rgba(0, 0, 0, 0.02);
}

nav {
  display: flex;
  justify-content: space-around;
  padding-left: 4em;
  padding-right: 4em;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-items {
  display: flex;
  justify-content: space-around;
  gap: 2em;
}

.nav-items[data-menustyle="closed"] {
  display: none;
}

.nav-items[data-menustyle="open"] {}

.nav-block {
  list-style-type: none;
  display: flex;
  gap: 2em;
}

.nav-item {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.nav-link {
  text-decoration: none;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  font-size: 0.875em;
  color: gray;
  border: 1px solid #00FF00;
}

.nav-link:hover {
  color: black;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.in-touch {
  width: 9.375em height: 2.625em;
  padding: 0.625em 1.25em;
  background-color: #A900E4;
  color: white;
  border-radius: 0.25em;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875em;
}


@media screen and (max-width: 768px) {
  nav {
    flex-direction: column;
    align-content: center;
  }
  .nav-items {
    flex-direction: column;
    gap: 8px;
  }
  .logo {
    margin-top: 1em;
  }
  .nav-block {
    flex-direction: column;
    justify-content: center;
  }
  .logo {
    display: flex;
    justify-content: space-between;
  }
  .nav-item {
    text-align: center;
  }
  .in-touch-container {
    margin-bottom: 2em;
  }
  .nav-items[data-menustyle="closed"] {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .nav-items[data-menustyle="closed"] {
    display: flex;
  }
}


  
    
      Hello
      
        
      
    
    
      
        Home
        About Me
        My Works