汉堡下拉css显示属性答案

【问题标题】：hamburger dropdown css display property汉堡下拉css显示属性
【发布时间】：2021-08-21 23:34:20
【问题描述】：

我有一个 CSS 媒体查询/flexbox 样式，它在导航 div 达到 768 像素的最大宽度后分配一个“显示：无”。使用 Javascript，一旦按下我的汉堡包按钮，我就可以使用 if/else 语句切换显示：“阻止”和“无”。

然而，痛点是一旦我将其切换为“显示：无”，一旦屏幕超出指定宽度，导航栏就会消失；并且汉堡菜单只出现在较小的宽度尺寸。

似乎切换为它永久分配了“显示：无”。如何在不点击汉堡按钮的情况下将“显示：无”删除回“显示：阻止”？

const burgerBar = document.querySelector('.burger');
const navigation = document.querySelector('.navigation');
const navbarItems = document.querySelector('.navbar-items');
const navbarItem = document.querySelector('.navbar-item');

burgerBar.addEventListener('click', () => {

  if (navigation.style.display != 'block') {
    navigation.style.display = 'block'
  } else {
    navigation.style.display = 'none'
  }


})

@media screen and (max-width: 768px) {
  /* width below 768 */
  .header-container {
    padding: 15px;
  }
  .navigation {
    display: none;
  }
  .burger {
    display: block;
  }
}

<div class="navigation">
  <nav class="navbar-container">
    <ul class="navbar-items">
      <li class="navbar-item"><a href="#hero">Home</a></li>
      <li class="navbar-item"><a href="#projects">Projects</a></li>
      <li class="navbar-item"><a href="/">Github</a></li>
      <li class="navbar-item"><a href="/">About</a></li>
      <li class="navbar-item"><a href="/">Contact</a></li>
    </ul>
  </nav>
</div>

<div class="burger">
  <div class="bar-one"></div>
  <div class="bar-two"></div>
  <div class="bar-three"></div>
</div>

【问题讨论】：

您在寻找类似window.onresize:w3schools.com/jsref/event_onresize.asp 的东西吗？
能否也包含您的 HTML 以便我们进行测试？请阅读how to create a minimal reproducible example。
感谢团队！刚刚添加了那些针对的 HTML 部分。让我知道您的想法/如何改进。我试图避免使用教程视频，因为大多数目标是 translate / transformX/Y 100% .. 并没有真正帮助我的事业。
除了window.onresize，你可以只设置一个有display:block;的媒体查询。对于小尺寸以外的任何尺寸，因此当您移动到更大的屏幕时，它会自动继承 display: block;
嗨罗宾-尝试在最大宽度为 1200px 的情况下也这样做以查看..和我的显示：无；不幸的是，由于我认为我如何通过 javascript 应用该属性，它仍然附加到导航 div？我使用较大尺寸的检查器进行了检查，并且仍然附加了“style ='display：none'”。还在挖！

标签： css flexbox

【解决方案1】：

您对 javascript 所做的事情是对标签本身使用内联样式例如

navigation.style.display = 'block'

会变成这样的

<div style="display:none;"> </div>

但是您使用类对 css 所做的操作不能覆盖内联样式由于CSS Specificity

每个选择器在特异性层次结构中都有自己的位置。有定义选择器特异性级别的四个类别：

内联样式 - 内联样式直接附加到元素上风格化。示例：.

IDs - ID 是页面元素的唯一标识符，例如 #导航栏。

类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如 :hover、:focus 等。

元素和伪元素 - 此类别包括元素名称和伪元素，例如 h1、div、:before 和 :after。

解决方案：

使用 javascript 切换隐藏导航的类（而不是直接更改属性）

【讨论】：

funny.. 我刚刚尝试使用 navigation.classList.add('display_toggle') （刚刚创建了只有 display:block; 的类。我看到它在点击后应用但它不会覆盖媒体查询显示：无；属性。我只看到类粘在那里。
是 mediaQuery 之后还是之前的新类？
在应用媒体查询之后，因为汉堡只出现在 768 像素或更低的位置。此时，导航 div 有一个 display:none;分配给它。然后在我单击出现的汉堡按钮后执行 javascript。我猜它不会覆盖分配的媒体查询属性 =[

【解决方案2】：

解决了！ display_toggle 类需要在媒体查询之后......我相信这与特异性有关。

【讨论】：