手风琴效果是前端常用的功能，效果类似于QQ联系人，点击一个分类标题显示他的内容，再点击其他分类标题，再显示响应的内容，同时其他的内容回收
HTML代码
css代码
- {
margin:0;
padding:0
}
.box {
200px;
margin:30px auto;
cursor:pointer;
user-select:none;
}
.nav {
margin:1px 0px;
}
h3 {
background:rgb(30,116,30);
color:white;
font-size:20px;
height:40px;
line-height:40px;
padding-left:10px;
}
p {
height:30px;
line-height:30px;
padding-left:20px;
}
p:hover {
background:rgba(12,208,243,0.877);
color:white;
}
.pp {
display:none;
}
js代码
$(".nav").each(function() {
$(this).click(function() {
// hide隐藏
$(".pp").hide();
//eq确定点击位置
// slideToggle 滑入滑出
$(".pp").eq($(this).index()).slideToggle();
})
})
这里的逻辑使用jq写的，所以别忘引入jquery库了
效果图：
