用原生js写了一个下拉菜单，每次想实现次级菜单下拉，都要去绑定onmouseover和onmouseout事件，很是麻烦，有什么好办法么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
*{padding: 0px;margin: 0px;}
ul{
list-style-type: none;
}
li{
cursor: pointer; /*鼠标变成小手*/
}
#menu{
line-height: 50px;
width: 800px;
margin: 0 auto;
}
/*子代选择器：#menu下面的第1层li标签*/
#menu>li{
float: left;
padding: 0px 0px;
background: #CCCCCC;
width: 120px;
text-align: center;
}
#sub{
display: none;
}
#sub li{
/*padding: 10px 0px;*/
border-bottom: 1px solid #fff;
}
</style>
<script>
//显示次级菜单
function show(){
var sub=document.getElementById("sub");
sub.style.display="block"
}
//隐藏次级菜单
function hide(){
var sub=document.getElementById("sub");
sub.style.display="none"
}
</script>
</head>
<body>
<ul id="menu">
<li>首页</li>
<li onmouseover="show()" onmouseout="hide()">课程大厅
<ul id="sub">
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
<li>Python</li>
</ul>
</li>
<li>学习中心</li>
<li>经典案例</li>
<li>关于我们</li>
</ul>
</body>
</html>
这样给你说 把点击事件写在父节点上，每个li都有固定的id或者type
<ul catchtap="navType"> <li data-type="0"></li> <li data-type="1"></li> </ul> { navStatus(e) { const _type = e.target.dataset.type; if (!_type) { return; } }你是觉得绑定的事件太多了吗？那可以只给ul绑定事件，通过event判断当前是在哪一个li上，再实现显示或隐藏