我的导航栏有问题。在移动设备上时，我希望单击列表项后隐藏导航栏的内容。仅当您将窗口的大小从大调整为小时，才会出现此问题。屏幕尺寸已经很小时，不会发生这种情况。因此，您必须单击“扩展代码段”以查看问题。我认为我的javaScript代码有问题，但是我不确定它是什么。谢谢！
$(document).ready(function() {
var menuStatus = true;
var sections = $('section');
var nav = $('nav');
//smooth scroll
$("nav,#arrow").find('a').on('click', function() {
var el = $(this),
id = el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 500);
});
//hide the mobile nav after a link is clicked
if ($(window).width() < 900) {
$("nav li a").on('click', function() {
$(".menu").hide();
$('nav input:checkbox:checked').prop('checked', false);
});
$("nav input").on('click', function() {
$(".menu").show();
});
}
//show desktop nav when the screen is at least 900px
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 900) {
$(".menu").show();
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<section id="home">
<nav>
<div class="nav__container">
<img id="logo" src="https://via.placeholder.com/150" alt="logo">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#aboutUs">about us</a></li>
<li><a href="#menu">menu</a></li>
<li><a href="#gallery">gallery</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</nav>
</section>
<section id="aboutUs">
</section>
</body>
</html>
相关分类