js原生实现的一个下拉菜单，每次都要绑定onmouseover和onmouseout事件，怎样修改？ - WXOPEN Club

用原生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>

mengxiulan 1楼•5 年前

你是觉得绑定的事件太多了吗？那可以只给ul绑定事件，通过event判断当前是在哪一个li上，再实现显示或隐藏

kgong 2楼•5 年前

这样给你说把点击事件写在父节点上，每个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;
    }
}