程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

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


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

发布于2023-11-18 07:46     阅读(252)     评论(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>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/532555/233057165348274ec097/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)