JavaScript响应菜单

我这里有导航菜单

下面是我的JS，我目前必须使其响应，以便在单击它时打开，但它不工作：

功能显示菜单（事件）{
event.preventDefault（）；
let element=document.getElementById（'header'）；
if（element.classList.contains（'active'））{
element.className=“”；
}否则{
element.className=“活动”；
}
}

标题{
填充：0！重要；
背景：#fff；
}
header.active{
盒影：0 1px 5px 1px rgba（0,0,0,0.2）；
}
标题。固定{
填充：0；
}
标题按钮{
位置：绝对位置；
顶部：12px；
右：25px；
显示：块；
宽度：30px；
高度：40px；
填充顶部：6px；
边界：无；
背景：#fff；
}
标题按钮跨距{
位置：相对位置；
排名：0；
显示：块；
宽度：100%；
高度：2.5px；
边缘底部：5px；
过渡：所有。2轻松；
边界半径：15px；
背景#0d2366；
}
标题按钮范围：第n个子项（2）{
右：0；
宽度：80%；
不透明度：1；
}
标题按钮范围：第n个子项（3）{
宽度：60%；
}
header.active按钮跨度：第n个子项（1）{
顶部：8px；
左：-4px；
-ms变换：旋转（38度）；
变换：旋转（38度）；
}
header.active按钮跨度：第n个子项（2）{
右图：-100%；
不透明度：0；
}
header.active按钮跨度：第n个子项（3）{
顶部：-6px；
左：-4px；
宽度：100px；
-ms变换：旋转（-38度）；
变换：旋转（-38度）；
}
标题ul菜单-左侧{
显示：无；
}
收割台img{
左边距：25px！重要；
}
标题.激活ul.菜单-左侧{
显示：块；
浮动：无；
明确：两者皆有；
}
header.active ul.menu-left li{
显示：块！重要；
填充：10px 20px；
}
标题ul菜单-右侧{
显示：无；
}

使用

addEventListener

可以查看单击事件。单击按钮后，下面的第三行将在添加和删除id=“header”上的类“active”之间切换

---

在何处调用

showMenu

函数？

document.getElementById("submenu").addEventListener("click", function(event) {
  event.preventDefault();
  document.getElementById("header").classList.toggle("active");
});