jQuery手风琴

jQuery版的手风琴
好久没写东西了，今天弄了个简单的手风琴效果，希望大家多多支持。也希望能够帮助到刚刚接触jQuery的朋友。

css部分，就是样式效果。

qin{

width:300px;
text-align:center;
margin:50px auto;
}
#qin>div{

background:yellow;
}
#qin>div>div{
border-bottom:1px #ccc dashed;
display:none;
height:30px;
line-height:30px;
}
#qin>div>div:nth-child(4){
border:none;
}
#qin>div>p{
border-bottom:1px #fff solid;
height:50px;
background:#ccc;
color:#3e2daa;
line-height:50px;
}
#shouye{
color:#008800;
height:80px;
line-height:80px;
}
html部分。

前端知识

第一章

html1

html2

html3

第二章

css1

css2

css3

第三章

javascript1

javascript2

javascript3

第四章

jQuery1

jQuery2

jQuery3

第五章

vue.js1

vue.js2

vue.js3

js：主角登场jQuery简单但是就是没有看着原生的清爽，习惯了就好。

$("#qin>div>p").click(function(){ //这句是给p标签加了个点击事件
$(this).css("color","yellow").css("background","red")//点击当前的p加了个字体颜色和背景颜色
.nextAll().slideDown()//展开当前元素的同辈元素
.end().parent().siblings()//返回上一次的操作对象找到同胞兄弟
.children("p").css("color","#3e2daa").css("background","#ccc")//下边的p改回字体颜色和背景颜色
.end().children("div").hide();//返回上一次的操作对象找到下边的div 并进行关闭

})
完毕，大家多交流，同学习同进步。