发布于2023-11-18 07:46 阅读(308) 评论(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个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!