2个回答
展开全部
先var一个a= document.getEgetElement已经隐藏的那个div或者内容。
然后a. onclick=function（）{
a.style.display="block";
}
注释：点击a时，调用匿名方法=a的样式，display变成block
百度知道这类问题很多，随便复制粘贴。我不给你全写出来，是授人以鱼不如授人以渔，自己理解，然后再写出来。
然后a. onclick=function（）{
a.style.display="block";
}
注释：点击a时，调用匿名方法=a的样式，display变成block
百度知道这类问题很多，随便复制粘贴。我不给你全写出来，是授人以鱼不如授人以渔，自己理解，然后再写出来。
追问
实在改不出来呀，可否再多教一点
实在改不出来呀，可否再多教一点
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
