我有一个旋转木马和一个导航栏。当它显示在移动设备上时,导航栏将消失,并出现汉堡图标。当您单击汉堡包图标时,导航栏将切换。 问题是:如果我不点击汉堡图标,当我缩小或拉伸屏幕时,导航栏和汉堡图标会消失/正确显示,但如果在移动屏幕上我点击汉堡图标并关闭它,然后我拉伸屏幕,导航栏将在大屏幕上永远消失。 我是新手,我真的不知道为什么。请帮我解决一下这个。非常感谢!
var src1 = "./images/icon-close.svg";
var src2 = "./images/icon-close.svg";
$('#mobile-nav-icon').click(
function() {
$('.navbar-list').slideToggle(200);
$('.navbar-list').toggleClass("background");
$('.navbar-list').toggleClass("selected");
var src = $('#mobile-nav-icon').attr('src');
if (src == src1) {
$('#mobile-nav-icon').attr('src', src2);
} else {
$('#mobile-nav-icon').attr('src', src1);
}
}
);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
font-size: 62.5%;
}
.background {
background-color: white;
}
.section1 {
position: relative;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.selected {
box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);
}
/* navbar */
.navbar-list {
list-style: none;
width: 380%;
height: 100px;
display: block;
}
.navigation {
position: absolute;
top: 7%;
left: 8%;
}
.navbar-brand {
float: left;
margin: 0 40px 0 3%;
color: white;
font-weight: 600;
font-size: 2rem;
}
.navbar-item {
display: inline-block;
margin: 1.6% 3% 3%;
}
.navbar-link {
color: white;
font-size: 1.2rem;
}
#mobile-nav-icon {
display: none;
position: absolute;
margin-top: 6%;
cursor: pointer;
}
.navbar-link:hover {
color: white;
text-decoration: none;
}
/* reponsive */
@media (max-width:540px) {
#mobile-nav-icon {
margin-top: 6%;
display: block;
}
.navbar-list {
display: none;
position: absolute;
font-weight: 600;
width: 300%;
top: -30px;
left: -30px;
height: 100px;
}
.navbar-brand {
margin-left: 150px;
}
.navbar-link {
color: black;
}
.navbar-item {
margin-top: 6%;
}
.navbar-item:first-child {
margin-left: 10%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="col-lg-7 nopadding section1">
<!-- carosel -->
<div class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" class="d-block w-100" alt="image-hero-1">
</div>
</div>
</div>
<!-- navbar -->
<nav class="navigation">
<a class="navbar-brand" href="#">room</a>
<div class="navbar-list-button">
<ul class="navbar-list">
<li class="navbar-item">
<a class="navbar-link" href="#">home</a>
</li>
<li class="navbar-item">
<a class="navbar-link" href="#">shop</a>
</li>
<li class="navbar-item">
<a class="navbar-link" href="#">about</a>
</li>
<li class="navbar-item">
<a class="navbar-link" href="#">contact</a>
</li>
</ul>
<img id="mobile-nav-icon" src="./images/icon-hamburger.svg" alt="icon-hamburger">
</div>
</nav>
</div>
答案 0 :(得分:0)
我不会使用 .slideToggle() 来显示或隐藏菜单,而是使用 toggleClass('showing')
然后在媒体查询中定义 .showing 类,如下所示:
@media (max-width:540px) {
.navbar-list {
display: none;
}
.navbar-list.showing {
display: block;
}
}
使用 .slideToggle() 打开然后关闭菜单,意味着当你再次放大屏幕时,它仍然会被关闭。
但是通过使用 .toggleClass('showing') 你打开菜单,通过添加 CSS 规则,只有当屏幕小于 540px 时才会生效。当你关闭它时,这个类将被删除,所以 display: none 来自你更一般的媒体查询将重新发挥作用。当您增大屏幕时,媒体查询都不会应用,因此您将返回 display: block(打开菜单)。