Js下拉列表问题

woshijunjun · 发表于 2021-11-23 15:00:41

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
ul{
display: none;
}
h3{
margin: 0;
background: cornflowerblue;
}
div{
text-indent: 20px;
width: 200px;
}
.active{
background: coral;
}
ul li:hover{
background-color: #FFF5DA;}

</style>
</head>

<body>
<div>
<h3>分组1</h3>
<ul>
<li>分组11</li>
<li>分组12</li>
<li>分组13</li>
</ul>
</div>
<div>
<h3>分组2</h3>
<ul>
<li>分组21</li>
<li>分组22</li>
<li>分组23</li>
<li>分组24</li>
</ul>
</div>
<div>
<h3>分组3</h3>
<ul>
<li>分组31</li>
<li>分组32</li>
<li>分组33</li>
<li>分组34</li>
<li>分组35</li>
</ul>
</div>
<script>
var h3s = document.getElementsByTagName("h3");

for(var i = 0;i<h3s.length;i++)
{
h3s[i].onmouseover = function()
{
this.style.background = "coral";
}
h3s[i].onmouseout = function()
{
this.style.background = "cornflowerblue";
}
}
/*-----------------*/
var uls = document.getElementsByTagName("ul");
for(var j = 0;j<uls.length;j++)
{
uls[j].onmouseover = function()
{
this.style.display = "block";
}
uls[j].onmouseout = function()
{
this.style.display = "none";
}
}
</script>
</body>
</html>

不知道为什么，隐藏的列表始终没法显示出来！请大神帮忙解惑，万分感谢

woshijunjun · 发表于 2021-11-23 15:03:17

发错地方了，对不起，如果有大哥能帮忙，再好不过了，谢谢🙏

账号		自动登录	找回密码
密码			立即注册