超简单jQuary链式操作代码实现手风琴效果

超简单jQuery代码实现手风琴效果

---

HTML代码

 <div id="cont">
    <div>
        <p>人生若只如初见</p>
        <div>
            <img src="img/1.jpg">
        </div>
    </div>
    <div>
        <p>何事秋风悲画扇</p>
        <div>
            <img src="img/2.jpg">
        </div>
    </div>
    <div>
        <p>等闲变却故人心</p>
        <div>
            <img src="img/3.jpg">
        </div>
    </div>
    <div>
        <p>却道故人心易变</p>
        <div>
            <img src="img/4.jpg">
        </div>
    </div>
</div>

css代码

  body{margin: 0;padding: 0;background: darkgoldenrod;position: relative;}
    body html{height:100%;}
    #cont{
        position: absolute;
        width: 500px;
        background: red;
        margin-left: 400px;
        margin-top: 100px;
    }
    #cont>div>p{
        margin: 0;
        background: pink;
        border-bottom: 1px solid #fff;
        text-align: center;
        line-height: 70px;
        font-size: 20px;
        color: cornflowerblue;
        font-weight: bold;
        font-family: fantasy;
    }
    #cont>div>div{
        height: 150px;
        display: none;
    }
    #cont>div>div>img{
        width: 500px;
        height: 150px;
    }

js代码

 $("#cont>div>p").click(function(){//为当前元素p添加点击事件
    $(this).nextAll().slideDown().//查找当前元素之后所有的同辈元素使其显示。
        end().parent().siblings().//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
           children("div").hide();//获取父元素下的所有叫div的子元素使其点击时隐藏。