版权声明：本版权归Mr.Lei https://blog.csdn.net/qq_42977174/article/details/83413784
js脚本实现层叠菜单效果（源码）
<!DOCTYPE html>
<html
>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
text-align: center;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
}
div{
width: 150px;
border: 1px solid deepskyblue;
margin: 10px;
}
div li{
background-color: deepskyblue;
border-bottom: 1px solid #fff;
}
div li a{
text-decoration:none;
color: #fff;
font-size: 16px;
height: 40px;
line-height: 40px;
}
div li a:hover{
text-decoration: underline;
}
.wrap{
width: 150px;
display: none;
}
.wrap li{
background-color: #fff;
margin: 0px;
}
.wrap li a{
color:#3B475F;
font-size: 12px;
}
</style>
<body>
<div id="w2">
<ul>
<li>
<a href="#">信息管理</a>
<ul class="wrap">
<li><a href="#">信息管理</a></li>
<li><a href="#">信息管理</a></li>
<li><a href="#">信息管理</a></li>
</ul>
</li>
<li>
<a href="#">信息管理</a>
<ul class="wrap">
<li><a href="#">信息管理</a></li>
<li><a href="#">信息管理</a></li>
<li><a href="#">信息管理</a></li>
</ul>
</li>
<li>
<a href="#">信息管理</a>
<ul class="wrap">
<li><a href="#">信息管理</a></li>
<li><a href="#">信息管理</a></li>
<li><a href="#">信息管理</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
$("#w2>ul>li:first").find(".wrap").css({display:'block'})
});
$("#w2>ul>li").click(function(){
$(this).find(".wrap").css({display:'block'});
$(this).siblings("li").find(".wrap").css({display:'none'});
});
</script>
</html>
友情链接
杨校-博客园