为什么我的移动导航栏会出现这种情况？

Question

问题如下：当我将浏览器的尺寸缩小到1240px时，打开移动菜单，然后关闭它，然后将浏览器的尺寸重新设置为高于1240px的分辨率，我的整个导航栏就会消失。我已经对此进行了一段时间的修改，无法修复。我最大的问题是我不确定问题是在JS方面还是在CSS Media查询方面。

$('.dropdown').on('click', function() {
  $('.container li:not(:first-child)').toggle();
  $('.container li:nth-child(8)').toggle();
});

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}

a {
  color: white;
}

body {
  /*background-color: #ece8e5;*/
  background-color: #f1f1f1;
  font-family: 'Raleway', sans-serif;
  font-weight: 550;
  height: 100%;
  width: 100%;
}

.wrapper {
  width: 65%;
  margin: 0 auto;
  height: 100%;
}

.navigation {
  background-color: #151719;
}

.container {
  display: flex;
}

.container>li {
  padding: 10px;
  text-align: center;
  font-size: 1em;
  color: white;
  box-sizing: border-box;
  background-color: #151719;
  list-style-type: none;
}

.space {
  flex: 1;
}

.dropdown {
  display: none;
}

.logIn,
.signUp {
  color: white;
  cursor: pointer;
}

@media all and (min-width: 0px) and (max-width: 1240px) {
  .container {
    flex-wrap: wrap;
  }
  .container>li {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 1240px) {
  .container li:not(:nth-child(1)) {
    display: none;
  }
  .container .dropdown {
    display: block;
    cursor: pointer;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="container">
      <li class='dropdown'><img class='dropdownImg' src='{{ url("storage/uploads/icons/dropdown.png") }}'></li>
      <li><a href="">Images</a></li>
      <li><a href="">Albums</a></li>
      <li><a href="">Tags</a></li>

      <li><a href="">Upload</a></li>

      <li><a href="">Admin Panel</a></li>

      <li><a href="">Contact Us</a></li>
      <li class='space'></li>

      <li class="logIn">Log In</li>
      <li class='signUp'>Sign Up</li>


      <li class='logOut'><a href="">Logout</a></li>
      @endauth
    </ul>
  </div>
</nav>

Answer 1

我想问题出在您的container li:not(:nth-child(1))中，该问题设置为none。并且您的脚本功能会在屏幕较大时触发另一个li隐藏。因此，我使用toggleClass来防止这种情况。现在是您的摘录：

$('.dropdown').on('click', function() {
  $('.container li').toggleClass('active');
});

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}

a {
  color: white;
}

body {
  /*background-color: #ece8e5;*/
  background-color: #f1f1f1;
  font-family: 'Raleway', sans-serif;
  font-weight: 550;
  height: 100%;
  width: 100%;
}

.wrapper {
  width: 65%;
  margin: 0 auto;
  height: 100%;
}

.navigation {
  background-color: #151719;
}

.container {
  display: flex;
}

.container>li {
  padding: 10px;
  text-align: center;
  font-size: 1em;
  color: white;
  box-sizing: border-box;
  background-color: #151719;
  list-style-type: none;
}

.space {
  flex: 1;
}

.dropdown {
  display: none;
}

.logIn,
.signUp {
  color: white;
  cursor: pointer;
}

@media all and (min-width: 0px) and (max-width: 1240px) {
  .container {
    flex-wrap: wrap;
  }
  .container>li {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 1240px) {
  .container li:first-child { /* exclude */
    display:block;
  }
  .container li { /* this should none */
    display: none;
  }
  
  .container li.active { /* toggleClass */
    display: block;
  }
  .container .dropdown {
    display: block;
    cursor: pointer;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="container">
      <li class='dropdown'><img class='dropdownImg' src='{{ url("storage/uploads/icons/dropdown.png") }}'></li>
      <li><a href="">Images</a></li>
      <li><a href="">Albums</a></li>
      <li><a href="">Tags</a></li>

      <li><a href="">Upload</a></li>

      <li><a href="">Admin Panel</a></li>

      <li><a href="">Contact Us</a></li>
      <li class='space'></li>

      <li class="logIn">Log In</li>
      <li class='signUp'>Sign Up</li>


      <li class='logOut'><a href="">Logout</a></li>
      @endauth
    </ul>
  </div>
</nav>