收藏
回答

js原生实现的一个下拉菜单,每次都要绑定onmouseover和onmouseout事件,怎样修改?

用原生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>
回答关注问题邀请回答
收藏

2 个回答

  • 微盟
    微盟
    03-19

    这样给你说 把点击事件写在父节点上,每个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;
        }
    }
    
    
    03-19
    赞同
    回复 1
  • Devil
    Devil
    03-18

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

    03-18
    赞同
    回复 1
    • 立志大灰郎
      立志大灰郎
      03-18
      用代码给实现一下呗
      03-18
      回复
登录 后发表内容
问题标签