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部分。

<div id="qin">
    <div id="shouye" style="background:#880000">
        <h2>前端知识</h2>
    </div>
    <div>
        <p>第一章</p>
        <div>html1</div>
        <div>html2</div>
        <div>html3</div>
    </div>
    <div>
        <p>第二章</p>
        <div>css1</div>
        <div>css2</div>
        <div>css3</div>
    </div>
    <div>
        <p>第三章</p>
        <div>javascript1</div>
        <div>javascript2</div>
        <div>javascript3</div>
    </div>
    <div>
        <p>第四章</p>
        <div>jQuery1</div>
        <div>jQuery2</div>
        <div>jQuery3</div>
    </div>
    <div>
        <p>第五章</p>
        <div>vue.js1</div>
        <div>vue.js2</div>
        <div>vue.js3</div>
    </div>
</div>

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 并进行关闭

})

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