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

Question

我对 HTML/CSS/JS 还很陌生，我只是尝试创建我的第一个响应式汉堡导航栏。

汉堡应该只出现在 600px 宽以下，几乎所有东西看起来和工作都很好。

我遇到的问题是，在我第一次使用（单击）汉堡然后将 window 扩展到 600 像素以上之后，导航栏不会重置为它应该看起来高于 600 像素，除非我刷新浏览器。 如果我在单击汉堡之前来回调整 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)

这是代码的rest： https://jsfiddle.net/ux93rsgh/

Answer 1

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

这个元素，使用 class top-nav-burger ，在你的样式表中有 CSS 规则，使用媒体查询，给它display: none超过 600px 宽度，并display: block在下面。 正如您所观察到的，当您的任何 JS 代码都还没有运行时，它可以完美运行。

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

burger.style.display = 'none'

同样当closeNav运行时：

burger.style.display = 'block'

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

这完全覆盖了您正在使用的 CSS styles ，包括媒体查询中的那些 - 因为内联!important使用后一个原因，我总是优先使用样式表规则（除了t 需要 go 到这里）。 因此，一旦你打开或关闭了菜单，你的样式表规则将永远不会发挥作用（至少对于那些特定的 CSS 属性）。

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

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

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


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

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

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

这将确保在菜单打开时永远不会显示汉堡图标，如您所愿。 我相信你可以计算出细节，并希望你明白为什么这样会更好。 首先，它通过将所有内容委托给 CSS 并且不使用内联 styles 覆盖它来修复您的错误。 但这对于关注点分离和代码维护也更好，因为每当您想更改菜单元素的 styles 时，例如通过更改菜单的高度，您只需在样式表中添加/更改它（就像您将页面的所有其他元素），而不必在一个或多个 JS 函数中寻找它。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-25 22:03:20

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-25 22:03:20

解决方案1
0 已采纳 2021-02-25 22:03:20