jQuery展开收起（及其封装）

因为最近用到了这个功能，在这里记录一下，方便以后查阅，也希望可以帮助到大家
css

.wan-item-item{
    margin-bottom: 4%;
    width: 95%;
    /* margin-left: 20px; */
    /* margin-bottom: 20px; */
    margin: 6px auto;
    border: 1px solid #ececec;
    min-height: auto;
    background: white;
    border-radius: .2rem;
}
.wan-item-item p{
    font-family: 微软雅黑, "Microsoft YaHei";
    color: rgb(35, 58, 110);
    font-size: 14px;
    /* font-weight: 700; */
    /* padding: 15px 15px; */
    margin: 15px 15px;
    background: white;
    /* border-bottom: 1px solid #eee; */
    border-radius: 12px 12px 0 0;
}
.wan-item-item p span{
float: right;
    width: 20px;
    height: 20px;
    background-image: url(skin/img/xia.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
    background-size: contain;
    right: 15px;
}
.wan-item-item p span.span1{
    float: right;
    width: 20px;
    height: 20px;
    position: relative;
    background-image: url(skin/img/shang.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
    right: 15px;
}
.wan-item-item .spane{
    padding: 0px 15px;
    display: inline-block;
    font-size: 12px;
    padding-top: 10px;
    position: relative;
    top: -7px;
    border-top: 1px solid #eee;
}

html

<li class="wan-item-item">
                            <p>品牌型网站建设<span></span></p>
                            <span class="span2 animated fadeInUp" style="display: none;">以目标客户为中心，以突出品牌官网特性为宗旨，从基础展示到企业的核心应用完美呈现品牌形象。</span>
                        </li>
<li class="wan-item-item">
                            <p>品牌型网站建设<span></span></p>
                            <span class="span2 animated fadeInUp" style="display: none;">以目标客户为中心，以突出品牌官网特性为宗旨，从基础展示到企业的核心应用完美呈现品牌形象。</span>
                        </li>

js

//01

 $('.wan-item-item .span2').hide();
        var isHide = false;
        $('.wan-item-item p').click(function() {
            isHide = !isHide;
            if (isHide) {
                $('.wan-item-item .span2').hide();
                $(this).next('.span2').show();
                $('.wan-item-item p span').removeClass('span1');
                $(this).children('p span').addClass('span1');
            } else {
                $(this).next('.span2').hide();
                $(this).children('p span').removeClass('span1');
            }
        })

//02

 showHide('.wan-item-item p', 'span1', '.wan-item-item .span2', 'wan-item-item p span')

        function showHide(Open, span1, Show, Close) {
            var isHide = false;
            $(Show).hide();
            $(Open).click(function() {
                isHide = !isHide;
                if (isHide) {
                    $(Show).hide();
                    $(this).next(Show).show();
                    $(Close).removeClass(span1);
                    $(this).children().addClass(span1);
                } else {
                    $(this).next().hide();
                    $(this).children().removeClass(span1)
                }
            })
        }