简单jQuery 实现手风琴菜单

简单jQuery 实现手风琴菜单

css代码 如下：

    *{
    margin: 0;
    padding: 0;
}
    #accordion{
    width: 500px;
}
    #accordion>div>p{
        width: 500px;
        text-align: center;
        border: 1px solid #ccc;
    }
    #accordion>div>p>img{
    width: 500px;
    height: 190px;
}   
    #accordion>div>div{
        width: 500px;
        background: url("ss3.jpg") no-repeat; 
        background-size: 100%; 
        text-align: center;
        line-height: 80px;
        display: none;
        border:0.5px solid #ccc;

    }
<div id="accordion">
    <div>
        <p>
            <img src="wrs5.jpg">
        </p>
            <div>不要皱眉,即使在伤心的时刻,因为你从不知道有谁会醉心于你的笑容</div>
            <div>千万别说直到永远，因为你压根不知道永远有多远。</div>
    </div>
    <div>
        <p>
            <img src="wrs2.jpg">
        </p>
            <div>你要努力，别因为生活，把自己变成一个low逼</div>
            <div>过去的靠现在忘记，将来的靠现在努力，现在才最重要。</div>
    </div>  
    <div>
        <p>
            <img src="wrs3.jpg">
        </p>
            <div>如果放弃太早，你永远都不知道自己会错过什么。</div>
            <div>做一个有脑子的,别让说起你的人,只记得你是个没用的废人</div>
    </div>
        
        
        
    
        
</div>
    

jQuery代码（虽然看着不习惯，但比js少很多哦！）如下：

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
/*$(document).ready(function(){
    alert("hello jquery");
});

$(function(){
    alert("hello jquery1");
});
window.onload=function(){
    alert("hehe");
};*/
$("#accordion>div>p").click(function(){

    $(this).nextAll().slideDown().end().parent().siblings().children("div").hide();
});


</script>

！一个做前端的妹子。

！喜欢挑战一切不可能。

！欢迎来骚扰。

！嘤嘤嘤。

转载于:https://www.cnblogs.com/WWWrs/p/6832818.html