一个导航栏，当鼠标点击时显示隐藏内容，我在css里用display：none给隐藏了，

发布网友发布时间：2022-05-31 11:01

共2个回答

热心网友时间：2023-10-13 17:28

先var一个a= document.getEgetElement已经隐藏的那个div或者内容。
然后a. onclick=function（）{
a.style.display="block";

}
注释：点击a时，调用匿名方法=a的样式，display变成block
百度知道这类问题很多，随便复制粘贴。我不给你全写出来，是授人以鱼不如授人以渔，自己理解，然后再写出来。追问实在改不出来呀，可否再多教一点

实在改不出来呀，可否再多教一点

热心网友时间：2023-10-13 17:29

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
nav {
width: 120px;
}

li {
text-align: center;
line-height: 40px;
}

li a {
height: 40px;
display: block;
background: linear-gradient(#fd6145, #f79483, #fd6145); /* 线性渐变 */
}

.drop-down {
background: #fa9c8b;
color: #fff;
height: 0;
overflow: hidden;
transition: all .3s;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">语言</a>
<div>
<div>HTML</div>
<div>CSS</div>
<div>JS</div>
</div>
</li>
<li>
<a href="javascript:;">框架</a>
<div>
<div>jQuery</div>
<div>Vue</div>
<div>React</div>
</div>
</li>
<li>
<a href="javascript:;">后端</a>
<div>
<div>NodeJS</div>
<div>MySQL</div>
</div>
</li>
</ul>
</nav>

<script>
var as = document.querySelectorAll('li a');

for(var i = 0; i < as.length; i++) {
as[i].onclick = function() {
if(this.parentNode.children[1]) {

var next = this.parentNode.children[1];

// 获取 drop-down 的所有子节点
var children = next.children;

if(next.offsetHeight == 0) {
next.style.height = 40 * children.length + 'px';
} else {
next.style.height = '0';
}
}
}
}
</script>
</body>
</html>