我一直在喝“firehose”，我可能只是一个简单的问题。我有一个ul菜单，使用jquery .addClass更改为移动滑块菜单。在800px时，桌面菜单消失，出现菜单“汉堡”。单击/点击时，汉堡从左侧切换滑块菜单。这一切都正常，但单击锚标签上的子菜单链接会使菜单保持原位，重叠内容。必须再次点击/点击汉堡，使菜单退出窗口。
我正在寻找一个解决方案，在子菜单lia（锚标记）点击事件期间基本上切换/重置汉堡，删除菜单，同时仍然允许它在同一页面上再次使用（对于其他锚点） ）。
到目前为止，我的解决方案已经删除了单击菜单，但未能允许再次使用/查看该特定子菜单。此外，汉堡不会切换到原来的设置。另一个当前的实验删除了菜单，离开了悬停，并没有切换汉堡，因此它与滑块不同步。任何建议都非常感谢！
P.S。锚标签位于“CUSTOMIZE”链接下。 “myFunction”脚本切换“汉堡”
链接到查看测试页面： http://www.cardscreative.com/cc2017/test2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cards Creative - Telling stories. Beautifully.</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel='stylesheet' type='text/css' href="test2.css">
<link rel='stylesheet' type='text/css' href="css/fixedsticky.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,800|Cormorant+Garamond:400,500' rel='stylesheet'>
<script> function myFunction(x) {
x.classList.toggle("change"); }
</script>
</head>
<body>
<!--- Begin Nav & Burger Menu --->
<input id="menuToggle" type="checkbox" />
<label for="menuToggle">
<div id="burger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"><p>MENU</p></div>
<div class="bar3"></div>
</div>
</label>
<!--- Slide/Nav Mobile --->
<div class='nav'>
<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>CUSTOMIZE <span style="font-family:Arial Black;">►</span></a>
<ul>
<li><a href='#top'>Design Options</a></li>
<li><a href='#colors'>Colors</a></li>
<li><a href='#fonts'>Fonts</a></li>
<li><a href='#compare'>Font Comparison</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script src="js/cardsCreative.js" type="text/javascript"></script>
</body>
</html>
相关CSS：
#menuToggle {
display: none;
}
#menuToggle:checked ~ .mobile {
position: fixed; left: 0; top:0;
}
@media screen and (max-width: 801px) {
#burger { visibility:hidden;}
.nav {display:block;}
}
@media screen and (max-width: 800px) {
#burger { visibility: visible;}
.nav {display:none;}
相关的Jquery：
$(document).ready(function() {
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth < 800) {
$('.nav').removeClass('nav').addClass('mobile');
}
if (viewportWidth > 800) {
$('.mobile').removeClass('mobile').addClass('nav');
}
});
});
$(document).ready(function() {
$('#burger').on('click', function() {
$('.nav').removeClass('nav').addClass('mobile');
});
});
$(document).ready(function() {
$('.nav').children('ul').find('ul').on('click', function(){
$('input[type=checkbox]').trigger('click');
$('myFunction').toggle();
});
});