点击一级菜单弹出二级菜单，同时其他一级菜单关闭，点击同一个菜单会也会收起本一级菜单下的二级菜单
下面附上源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
position: relative;
top: 20px;
left: 20px;
width: 168px;
list-style: none;
}
.nav>li{
border: 1px solid black;
text-indent: 1em;
line-height: 30px;
border-bottom: none;
position: relative;
}
.nav>li:last-child{
border-bottom: 1px solid black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.nav>li:first-child{
border-top: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.nav>li>span{
position: absolute;
top: 3px;
right: 10px;
display: inline-block;
width: 20px;
height: 20px;
background: url(./image/右箭头.png);
background-size: 20px 20px;
}
/* 二级菜单*/
.content{
display: none;
}
.content>li{
list-style: none;
background-color: mediumpurple;
border-bottom: 1px solid white;
text-indent: 2em;
}
.content>li:last-child{
border-bottom: none;
}
.content>li:hover{
background-color: violet;
}
.nav>.current>span{
transform: rotate(90deg);
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function (){
//1监听一级菜单的点击事件
$(".nav>li").click(function (){
//1.1拿到二级菜单
let $content = $(this).children(".content");
//1.2清空动画队列让二级菜单展开
$content.stop();
$content.slideToggle(500);
//1.3拿到所有非当前的二级菜单
let $otherContent = $(this).siblings().children(".content")
//1.4让所有非当前的二级菜单收起
$otherContent.slideUp(500);
//1.5让被点击的一级菜单箭头旋转
if($(this).hasClass("current")){
$(this).removeClass("current");
}else{
$(this).addClass("current");
}
//1.6让未被点击的一级菜单箭头复原
$(this).siblings().removeClass("current");
})
});
</script>
</head>
<body>
<ul class="nav">
<li>一级菜单<span></span>
<ul class="content">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单<span></span>
<ul class="content">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单<span></span>
<ul class="content">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
效果截图
### 总结 使用display:none（隐藏样式） 和slideDown、slideUp、slideToggle(滑出、收回、切换)等属性和方法相互配合就能实现。(注：需要对jQuery语法有一定了解）
版权声明：本文为yg94web原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。