我的导航栏有问题。在移动设备上时，我希望单击列表项后隐藏导航栏的内容。仅当您将窗口的大小从大调整为小时，才会出现此问题。屏幕尺寸已经很小时，不会发生这种情况。因此，您必须单击“扩展代码段”以查看问题。我认为我的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>
添加回答
举报
0/150
提交
取消