为什么我的手机导航栏出现这种情况？
发布于2023-11-18 07:46 阅读(357) 评论(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/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力