为什么我的手机导航栏出现这种情况？-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249595299

访问

+关注

分类

暂无分类

日期归档

暂无数据

为什么我的手机导航栏出现这种情况？

发布于2023-11-18 07:46 阅读(298) 评论(0) 点赞(11) 收藏(4)

问题如下，当我将浏览器尺寸缩小到 1240px，打开移动菜单，然后将其关闭，并将浏览器尺寸调整到高于 1240px 的分辨率时，整个导航栏就会消失。我已经修复这个问题有一段时间了，但无法修复。我最大的问题是我不确定问题是在 JS 端还是 CSS 媒体查询端。

$('.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>

展开片段

解决方案

我猜问题出在你的container li:not(:nth-child(1))设置为无。当屏幕较大时，您的脚本函数会触发另一个 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>