实现效果图：
功能：点击某一个一级菜单时，相应的二级菜单会下拉出现
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>According</title>
<style>
* {
margin: 0px;
padding: 0;
}
.nav{
list-style: none;
width: 300px;
margin: 100px auto;
background: #ffb2a7;
}
.nav>li{
border: 1px solid #000000;
line-height: 35px;
border-bottom: none;
position:relative;
text-align: center;
}
.nav>li:last-child{
border-bottom: 1px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav>li:first-child{
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.nav>li>ul{
list-style: none;
background: #f8615a;
display: none;
}
.nav>li>ul>li{
border-top: 1px solid #ffb2a7;
line-height: 35px;
}
.nav>li>ul>li:hover{
background: #b80d57;
}
.nav>li>span{
background:url("./img/下拉前.png") no-repeat center center;
display: inline-block;
width: 32px;
height: 32px;
position:absolute;
right: 10px;
top: 5px;
}
</style >
<script src="./lib/jquery-1.11.3/jquery-1.11.3/jquery.min.js"></script>
<script>
$(function(){
$(".nav>li").click(function(){
var $sub =$(this).children(".sub");
$sub.slideDown(1000);
var otherSub=$(this).siblings().children(".sub");
otherSub.slideUp(1000);
})
});
</script>
</head>
<body>
<ul class="nav">
<li>一级菜单一
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单二
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单三
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单四
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
原文地址：https://www.cnblogs.com/lsl30522/p/12433551.html
时间： 2024-10-27 05:47:53