使用 flex 的响应式导航栏不会折叠答案

【问题标题】：Responsive navbar using flex is not collapsing使用 flex 的响应式导航栏不会折叠
【发布时间】：2019-01-30 05:51:03
【问题描述】：

我创建了一个响应式导航栏，其中包含使用 flex 的切换菜单，但在移动视图中它不会折叠。

我还包含了一个由 Font Awesome 提供的切换 btn，并将其集成到我的项目中的 html 头部。

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>

这是导航栏的代码。

<div class="Navbar3">
       <div class="Navbar__Link Navbar__Link-brand">
       </div>
        <div class="Navbar__Link Navbar__Link-toggle">
          <i class="fas fa-bars"></i>
        </div>

      <nav class="Navbar__Items">
        <div class="Navbar__Link active">
          All
        </div>
        <div class="Navbar__Link">
          <a href="graphic.html">Design</a>
        </div>
        <div class="Navbar__Link">
          <a href="animation.html">Animation</a>
        </div>
      </nav>  
    </div>

这是导航栏的CSS

  .Navbar3 {
  background-color: #2262AD;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
  justify-content: center;
}

.Navbar__Link {
  padding-right: 25px;
  font-weight: bold;
  align-self: center;
  justify-content: center;
  cursor: pointer;
}

.Navbar__Items {
  display: flex;

}
.Navbar__Link-toggle {
  display: none;
}
@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar3 {
    flex-direction: column;
  }
.Navbar__Items {
    display: none;
  }
.Navbar__Items--right {
    margin-left: 0;
  }
.Navbar__ToggleShow {
    display: flex;
  }
.Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
   } 
}

.Navbar__Link:hover{
  color: black;
}

.active {
color: black;
text-decoration: underline;
}

这里有一些用于切换的 js

function classToggle() {
          const navs = document.querySelectorAll('.Navbar__Items')

          navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
        }
        document.querySelector('.Navbar__Link-toggle')
          .addEventListener('click', classToggle);

【问题讨论】：

标签： html css responsive-design flexbox navigationbar

【解决方案1】：

当我在浏览器中测试时，您的代码似乎运行良好。如果它是不起作用的特定移动视图，请尝试添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 到你的头上。更多信息请访问MDN。希望这能解决您的问题。

【讨论】：

我也尝试了代码笔中的代码，我得到了它的工作，但在我的 index.html 和 style.css 文件中，由于某种原因它仍然无法工作......这是代码笔：codepen.io/anon/pen/MqapPM
我用我的完整代码创建了一个新的代码笔，以查看问题所在。现在它不起作用。这是javascript中的东西。我为html和css输入了完整的代码，但是js导致了这个问题。仍在研究如何修复它 CodePen：codepen.io/anon/pen/qMOmZj

【解决方案2】：

发现了这个问题。这是由我的 js 中的最后两行代码引起的。将它们注释掉，导航工作正常！

function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      var captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      //dots[slideIndex-1].className += " active";
      //captionText.innerHTML = dots[slideIndex-1].alt;
    }

【讨论】：