<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多级菜单</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.nav {
list-style: none;
width: 300px;
margin: 50px 0 0 50px;
}
.nav>li {
border: 1px solid black;
line-height: 35px;
border-bottom: none;
text-indent: 2em;
position: relative;
}
.nav>li:last-child{
border-bottom: 1px solid black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.nav>li:first-child{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav>li>span {
background: url(/5-jQuery/img/1-23-2 jq动画练习-箭头.png) no-repeat center center;
display: inline-block;
width: 32px;height: 32px;
position: absolute;
right: 50px;
transition: 0.3s linear;
}
.sub {display: none;}
.sub>li{
list-style: none;
background-color: blanchedalmond;
border-bottom: 1px solid rgb(253, 253, 253);
}
.sub>li:hover{
background-color: rgb(143, 130, 110);
}
.current>span {
transform: rotate(90deg);
}
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单<span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<script src="jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 可展开菜单，允许自己隐藏自己的二级菜单
$('.nav>li').click(function(event){
event.stopPropagation()
event.cancelBubble = true
// 2.1 获取当前一级菜单的展开状态
var $con = $(this).children('.sub').css('display');
// 2.2 判断状态：隐藏时展开二级菜单，旋转箭头；展开时隐藏二级菜单，还原箭头
if($con == 'none'){
$(this).children('.sub').slideDown(500)
$(this).addClass('current')
}else if($con == 'block'){
$(this).children('.sub').slideUp(500);
$(this).removeClass('current')
}
})
</script>
<!-- 问题：点击二级菜单时，二级菜单也会执行slideUp动画。如何将slideUp动画仅应用在一级菜单上。推测可能是冒泡影响的，但是取消后还是老样子，求教各位。 -->
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
