Javascript 如何在点击锚后关闭汉堡包菜单
首先，如果我的英语不太好，我想道歉，但现在我遇到了一个问题，我正在尝试制作汉堡包菜单，代码将列在下面，当点击锚（标记）时关闭。我有打开菜单的代码，但我希望在单击锚时关闭它，并使用节标记切换到所选锚Javascript 如何在点击锚后关闭汉堡包菜单,javascript,html,css,Javascript,Html,Css,首先，如果我的英语不太好，我想道歉，但现在我遇到了一个问题，我正在尝试制作汉堡包菜单，代码将列在下面，当点击锚（标记）时关闭。我有打开菜单的代码，但我希望在单击锚时关闭它，并使用节标记切换到所选锚 <!DOCTYPE html> <html> <head> <style> body { background-color: gray; } .m
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: gray;
}
.menu__toggler
{
position: absolute;
top: 20px;
left: 50%;
z-index: 999;
height: 28px;
width: 28px;
outline: none;
cursor: pointer;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
}
.menu__toggler span, .menu__toggler span::before, .menu__toggler span::after
{
position: absolute;
content: "";
width: 28px;
height: 2.5px;
background: #fafafa;
border-radius: 20px;
-webkit-transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before
{
top: -8px;
}
.menu__toggler span::after
{
top: 8px;
}
.menu__toggler.active > span
{
background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after
{
background: white;
top: 0px;
}
.menu__toggler.active > span::before
{
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.menu__toggler.active > span::after
{
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu
{
position: absolute;
left: -30%;
z-index: 998;
color: #005c9c;
background: rgba(250, 250, 250, 0.7);
-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
width: 30%;
height: 100%;
padding: 100px;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
}
@media only screen and (max-width: 900px)
{
.menu
{
width: 3250px;
left: -3250px;
padding: 50px;
}
}
.menu.active
{
left: 0;
}
.menu p
{
font-size: 1.4rem;
margin-bottom: 1rem;
}
*, *::before, *::after
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
min-height: 100vh;
background-color: #1d1f20;
font-family: "K2D", sans-serif;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
section
{
display: none;
}
section:target
{
display: block;
}
</style>
</head>
<body>
<div class="menu">
<div class="test2" id="menu">
<ul>
<li><a href="#default" class="test">Main menu</a></li>
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
</ul>
</div>
<div class="test3">
<ul>
<li><a href="#default" class="test">Second menu</a></li>
<li><a href="#test3">test3</a></li>
<li><a href="#test4">test4</a></li>
</ul>
</div>
</div>
<div class="menu__toggler">
<span></span>
</div>
<section id="test1">
test1
</section>
<section id="test2">
test2
</section>
<script type="text/javascript">
const toggler = document.querySelector('.menu__toggler');
const menu = document.querySelector('.menu');
toggler.addEventListener('click', () =>
{
toggler.classList.toggle('active');
menu.classList.toggle('active');
})
</script>
</body>
</html>
身体
{
背景颜色：灰色；
}
.菜单切换器
{
位置：绝对位置；
顶部：20px；
左：50%；
z指数：999；
高度：28px；
宽度：28px；
大纲：无；
光标：指针；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
}
.menu\uuu切换器span、.menu\uu切换器span:：之前、.menu\uu切换器span:：之后
{
位置：绝对位置；
内容：“；
宽度：28px；
高度：2.5px；
背景：#fafafa；
边界半径：20px；
-webkit转换：500ms立方贝塞尔（0.77,0,0.175,1）；
过渡：500ms立方贝塞尔（0.77,0,0.175,1）；
}
.menu_uu切换器span:：before
{
顶部：-8px；
}
.menu_uu切换器span:：after
{
顶部：8px；
}
.menu\u toggler.active>span
{
背景：透明；
}
.menu\u toggler.active>span:：before、.menu\u toggler.active>span:：after
{
背景：白色；
顶部：0px；
}
.menu\u toggler.active>span:：before
{
-webkit变换：旋转（-225度）；
变换：旋转（-225度）；
}
.menu\u toggler.active>span:：after
{
-webkit变换：旋转（225度）；
变换：旋转（225度）；
}
.菜单
{
位置：绝对位置；
左-30%；
z指数：998；
颜色：#005c9c；
背景：rgba（250250250,0.7）；
-webkit剪辑路径：多边形（0,100%0,85%100,0%100%）；
剪辑路径：多边形（0,100%0,85%100,0%100%）；
宽度：30%；
身高：100%；
填充：100px；
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit盒包：中心；
证明内容：中心；
-webkit转换：300ms左立方贝塞尔（0.77,0,0.175,1）；
过渡：300毫秒左立方贝塞尔（0.77,0,0.175,1）；
}
@仅介质屏幕和（最大宽度：900px）
{
.菜单
{
宽度：3250px；
左：-3250px；
填充：50px；
}
}
.menu.active
{
左：0；
}
.菜单p
{
字体大小：1.4rem；
边缘底部：1rem；
}
*，*：：之前，*：：之后
{
保证金：0；
填充：0；
框大小：边框框；
}
身体
{
最小高度：100vh；
背景色：#1d1f20；
字体系列：“K2D”，无衬线；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：居中；
对齐项目：居中；
}
部分
{
显示：无；
}
章节：目标
{
显示：块；
}
测试1
测试2
const-toggler=document.querySelector（'.menu_u-toggler'）；
const menu=document.querySelector（'.menu'）；
toggler.addEventListener（'click'，（）=>
{
toggler.classList.toggle（'active'）；
menu.classList.toggle（'active'）；
})
我在等待您的意见，看看我们是否可以对此做些什么：添加另一个事件侦听器以捕获HTML锚的点击，并使用classList remove方法隐藏菜单
menu.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
toggler.classList.remove('active');
menu.classList.remove('active');
}
})
小提琴手：非常感谢您！！！它工作得很好！！你们真是太棒了，我从stack overflow中学到了很多东西：D@GabrielBrooks你好，朋友。如果答案对您有帮助，则用绿色复选标记将其标记为已解决。