利用JavaScript做出来的下拉菜单，点击一个菜单其它的菜单自动关闭，能达到这个效果。效果还是很不错的，希望对大家的学习有所帮助。
下拉菜单效果：
源代码：
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
#box{
width: 120px;
background-color: #990055;
color: powderblue;
text-align: center;
}
#box>div{
height: 45px;
line-height: 45px;
overflow: hidden;
border: 1px solid #9a0000;
transition: all .3s;
}
ul{
background-color: #666666;
}
li{
height: 45px;
}
</style>
</head>
<body>
<div id="box">
<div class="cai" onclick="Open(this)">首页
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</div>
<div class="cai" onclick="Open(this)">制作
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</div>
<div class="cai" onclick="Open(this)">技术支持
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</div>
<div class="cai" onclick="Open(this)">操作</div>
<div class="cai" onclick="Open(this)">帮助
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
</ul>
</div>
</div>
<script>
function Open(obj){
let li=obj.getElementsByTagName("li").length;
let cai=document.getElementsByClassName("cai");
for(let i=0;i<cai.length;i++){
if(obj!=cai[i]){
cai[i].style.height="45px";
}else{
obj.style.height=((li+1)*45)+"px";
}
}
}
</script>
扫一扫
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
