如何创建响应式导航

Question

我正在尝试创建将出现在导航栏下方的菜单，我希望按钮和徽标之间有间隔，并且我希望项目显示在下方。我怎样才能做到这一点？现在我在一行中有 3 个项目，而不是下面出现的导航项目。我的代码似乎有问题，我必须按两次按钮才能发生任何事情。为什么会这样？

const btn = document.querySelector('button');

btn.addEventListener("click", () => {
  const navItems = document.querySelector('.nav-items');
  if (navItems.style.display == "none") {
    navItems.style.display = "block"
  } else {
    navItems.style.display = "none";
  }
})

nav {
  display: flex;
  align-items: center;
}

.nav-items {
  margin-left: auto;
  list-style: none;
  display: flex;
}

li {
  padding: 10px;
}

button {
  display: none;
}

@media only screen and (max-width: 900px) {
  .nav-items {
    display: none;
  }
  button {
    display: block;
    margin-left: auto;
  }
}

<nav>
  <h2>Logo
  </h2>
  <button>
  Toggle Mobile
  </button>
  <ul class="nav-items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>

  </ul>
</nav>

Answer 1

第一次运行时，navItems.style.display不等于“none”，它是空的，所以显示逻辑不起作用。

你最好颠倒逻辑：

if (navItems.style.display == "block") {
  navItems.style.display = "none";
} else {
  navItems.style.display = "block"
}

为了开始布局，请将 flex-wrap: wrap 添加到 nav，将 width: 100% 添加到 .nav-items。

Answer 2

如果您读取 style.display（或者实际上是 style.anything），它会从元素的 style 属性读取。 <ul class="nav-items"> 在第一次点击后变为 <ul class="nav-items" style="display:none">（条件的 else 部分），现在 if 部分可以计算为 true。在我看来，使用 CSS class 和 navItems.classList.toggle('the-class-that-handles-visibility').

会更好

也就是说，navItems 的可见性不应该首先由媒体查询排序吗？我在这里并没有真正看到 JS 的用例，除非我误解了你的问题。

如何创建响应式导航

How to create responsive navigation

javascript

css