js中展开收起按钮的样式实例

 效果图

 

简单样式

.fold-button{
    border:0;
    background: white;
}
<button id="fold" class="fold-button" data-type="part">
    <i class="fa fa-angle-down">&nbsp;展开</i>
    <i class="fa fa-angle-up hide">&nbsp;收起</i>
</button>

动作代码

​​​​​​​$("#fold").on("click", function (e) {
    if($(this).data("type") === "part"){
        $(this).data("type","all")
        $(this).find(".fa-angle-up").removeClass("hide");
        $(this).find(".fa-angle-down").addClass("hide");
    }else{
        $(this).data("type","part")
        $(this).find(".fa-angle-down").removeClass("hide");
        $(this).find(".fa-angle-up").addClass("hide");
    }
});

样例比较简单，我的第一篇文章