为什么在我单击汉堡并展开 window 后我的导航栏没有重置？

Question

我是 HTML/CSS/JS 的新手，我刚刚尝试创建我的第一个响应式汉堡导航栏。

汉堡应该只显示在 600 像素以下宽度，几乎所有东西看起来和工作都很好。

我遇到的问题是，在我第一次使用（单击）汉堡然后将 window 扩展到 600 像素以上后，导航栏没有重置为上面应该显示的样子600px，除非我刷新浏览器。如果我在单击汉堡之前来回调整 window 的大小，一切正常。

我的感觉是我的 JS 有问题，但我不知道是什么。有人可以帮忙吗？

这是我的 JS：

const header = document.getElementsByTagName('header')[0]
const nav = document.getElementsByClassName('top-nav-links')[0]
const burger = document.getElementsByClassName("top-nav-burger")[0]
const closeBtn = document.getElementsByClassName("close-button")[0]

function openNav () {
  header.style.height = '200px'
  burger.style.display = 'none'
  closeBtn.style.display = 'block'
  nav.style.display = 'flex'
}

burger.addEventListener('click', openNav)

function closeNav () {
  header.style.height = "100px"
  burger.style.display = "block"
  closeBtn.style.display = "none"
  nav.style.display = "none"
}

closeBtn.addEventListener('click', closeNav)

这是代码的其余部分：https://jsfiddle.net/ux93rsgh/

Answer 1

问题与您的 JS 函数直接在汉堡上设置样式的方式有关，header，等等。在我解释如何修复它之前，我将以汉堡图标本身为例来解释这里发生了什么。

此元素具有 class top-nav-burger，在您的样式表中有 CSS 规则，使用媒体查询，使其 display: none 宽度超过 600 像素，并且 display: block 低于那个。当您的 JS 代码 none 还没有运行时，正如您所观察到的那样，这非常有效。

但是当你的 JS openNav 函数运行s 时，它会这样做：

burger.style.display = 'none'

类似地当 closeNav 运行s:

burger.style.display = 'block'

这会在 HTML 元素上设置实际的 样式属性 。如果您在打开或关闭菜单后检查开发人员工具中的 DOM，您实际上会在元素上看到此属性。

这完全覆盖了您正在使用的 CSS 样式，包括媒体查询中的样式 - 因为内联样式始终优先于样式表规则（除非后者使用 !important -你基本上不应该使用它，原因我不需要进入这里）。因此，一旦您打开或关闭菜单，您在其中覆盖其样式的元素的样式表规则将永远不会发挥作用（至少对于那些特定的 CSS 属性）。

解决方案很简单，而且无论如何都是您应该做的，而不仅仅是因为它修复了这个错误。它还将更好地分离您的关注点。样式规则适用于 CSS 样式表，而 JS 应该只确定行为。您在这里想要的唯一“行为”就是说，“当我单击此按钮时，open/close 菜单”。您可以简单地通过向包含所有相关元素的某个元素添加 class 来表示打开或关闭状态，例如 <header>（尽管整个 <body> 也可以）。

所以你在 JS 中的函数将变得像这样简单：

function openNav () {
  header.classList.add("menu-open)";
}


function closeNav () {
  header.classList.remove("menu-open");
}

这本身不会有任何影响，但您可以在 CSS 样式表中添加规则，以了解这些规则如何影响样式 - 例如：

.menu-open .top-nav-burger {
  display: none;
}

这将确保菜单打开时永远不会显示汉堡图标，如您所愿。我相信你能弄清楚细节，希望你能理解为什么这样更好。首先，它通过将所有内容委托给 CSS 而不是使用内联样式覆盖它来修复您的错误。但它也有利于关注点分离和代码维护，因为无论何时你想改变菜单元素的样式，比如改变菜单的高度，你都可以在样式表中 add/change 它（就像你将针对页面的所有其他元素），而不必在一个或多个 JS 函数中寻找它。

为什么在我单击汉堡并展开 window 后我的导航栏没有重置？

Why isn't my nav bar resetting after I click the burger and expand the window?

html

javascript

css

responsive-design