這是本人自己用jq寫的折疊菜單,

折疊速度還可以在jq的slideToggle上調(diào)整，

加入了點擊標(biāo)題改變樣式效果

*html

<div class="zhedie">
    <ul>
        <li>
            <div class="biaoti">標(biāo)題1</div>
            <div class="neirong">內(nèi)容1</div>
        </li>
        <li>
            <div class="biaoti">標(biāo)題2</div>
            <div class="neirong">內(nèi)容2</div>
        </li>
        <li>
            <div class="biaoti">標(biāo)題3</div>
            <div class="neirong">內(nèi)容3</div>
            </li>
    </ul>
</div>

*css

.body{background-color: #FF6600;}
.zhedie{width: 326px;}
.zhedie ul li{margin-bottom: 2px;}
.biaoti{background-color: #282828;font-weight: bold;letter-spacing: 2px;line-height: 50px;color: #FFFFFF;display:block;margin: 0 5px;cursor: pointer;}
.biaoti_hover{color: #FFFFFF;background-color: #55ceff;padding: 0 5px;margin: 0;}
.neirong{width:296px;height:109px;background-color: #FFFFFF;color: #666666;font-size: 12px;line-height: 20px;margin: 2px 0 0 5px;padding: 18px 10px;overflow: hidden;display: none;}


*js

$(function(){
    var zhedieLi=$('.zhedie ul li');
    var biaoti=zhedieLi.find('.biaoti')
    var neirong=zhedieLi.find('.neirong')
    zhedieLi.each(function(index){
        biaoti.eq(index).on('click',function(){
            neirong.eq(index).slideToggle();
            $(this).addClass('biaoti_hover');
            biaoti.not(biaoti.eq(index)).removeClass('biaoti_hover');
            neirong.not(neirong.eq(index)).slideUp();
        })
    })
})