<html>
<head>
<meta charset="utf-8">
<title>41- jQuery展开和收起动画</title>
<style type="text/css"> / 下面都是css样式 /
{ / 通用样式/
margin: 0; / 外边距：0/
padding: 0; / 内边距：0/
}
.nav{ /<ul class="nav"> 的样式/
list-style: none; / 去除列表前面的点/
width: 300px; /宽：300px/
margin: 100px auto; /外边距： 高下：100像素 旁边：自动 居中/
}
.nav>li{ /<ul class="nav">里面的li标签样式/
border: #000000 solid 1px; /边框：玄色 实线 1像素/
line-height: 35px; /行高：35像素/
border-bottom: none; /下边框：空/
background-color: bisque; /背景颜色：浓汤色/
text-indent: 2em; / 缩进：2 /
position: relative; / 定位：相对定位/
}
.nav>li:last-child{ /<ul class="nav">里面的末了一个li标签 样式/
border-bottom: #000000 solid 1px; / 下边框：玄色 实线 1像素/
border-bottom-left-radius: 10px; / 左下角：圆角 10像素/
border-bottom-right-radius: 10px; / 右下角：圆角 10像素/
}
.nav>li:first-child{ /<ul class="nav">里面的第一个li标签 样式 /
border-top-right-radius: 10px; / 右上角：圆角 10像素/
border-top-left-radius: 10px; / 左上角：圆角 10像素/
}
.nav>li>span{ / <ul class="nav">里面的li标签里面的span标签 便是列表里的箭头 样式 /
display: inline-block; /行内块状元素/
width: 32px; /宽：32像素/
height: 32px; /高：32像素/
position: absolute; /定位：绝对定位/
right: 50px; /右边：50像素/
top: 2px; / 上边 ：2像素/
}
.sub1>li, .sub2>li, .sub3>li, .sub4>li, .sub5>li, .sub6>li, .sub7>li, .sub8>li{ /8个一级菜单下的名叫sub1-8的ul标签的样式/
border: white solid 1px; /边框：白色 实线 1像素/
background: darkmagenta; /背景：深洋赤色/
list-style: none; /去掉前面的点/
}
.sub1>li:hover{ / class="sub1"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub2>li:hover{ / class="sub2"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub3>li:hover{ / class="sub3"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub4>li:hover{ / class="sub4"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub5>li:hover{ / class="sub5"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub6>li:hover{ / class="sub6"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub7>li:hover{ / class="sub7"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub8>li:hover{ / class="sub8"的鼠标勾留样式/
background: red; /背景：赤色/
}
.sub1, .sub2, .sub3, .sub4, .sub5, .sub6, .sub7, .sub8{ /sub1-8的样式/
display: none; /隐蔽元素/
}
</style> <!--css样式结束 上面的是css样式 -->
<script src="../static/js/jquery-3.6.0.js"></script> <!-- 内部引入jQuery -->
<script> // js 代码开始
$(function(){ // jQuery 入口函数
$(".li1").click(function(){ // li1 的点击事宜，被点击调用
$(this).mouseleave(function(){$(".sub1").slideUp(1000)}) // 鼠标离开当前元素时用1秒事宜收起sub1
$(".sub1").slideDown(1000) // 用1秒事宜展开sub1
})
$(".li2").click(function(){ // li2 的点击事宜，被点击调用
$(this).mouseleave(function(){$(".sub2").slideUp(1000)}) // 鼠标离开当前元素时用1秒事宜收起sub2
$(".sub2").slideDown(1000) // 用1秒事宜展开sub2
})
$(".li3").click(function(){ // li3 的点击事宜，被点击调用
$(this).mouseleave(function(){$(".sub3").slideUp(1000)}) // 鼠标离开当前元素时用1秒事宜收起sub3
$(".sub3").slideDown(1000) // 用1秒事宜展开sub3
})
$(".li4").click(function(){
$(this).mouseleave(function(){$(".sub4").slideUp(1000)})
$(".sub4").slideDown(1000)
})
$(".li5").click(function(){
$(this).mouseleave(function(){$(".sub5").slideUp(1000)})
$(".sub5").slideDown(1000)
})
$(".li6").click(function(){
$(this).mouseleave(function(){$(".sub6").slideUp(1000)})
$(".sub6").slideDown(1000)
})
$(".li7").click(function(){
$(this).mouseleave(function(){$(".sub7").slideUp(1000)})
$(".sub7").slideDown(1000)
})
$(".li8").click(function(){
$(this).mouseleave(function(){$(".sub8").slideUp(1000)})
$(".sub8").slideDown(1000)
})
})
</script>
</head>
<body> <!-- 网页身体 -->
<ul class="nav">
<li class="li1">1一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub1">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li2">2一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li3">3一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub3">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li4">4一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub4">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li5">5一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub5">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li6">6一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub6">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li7">7一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub7">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li8">8一级菜单<span><img src="../static/image/right.png" width="32px" height="32px" ></span>
<ul class="sub8">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
