image.png

css部分

<style>
        .wrap{
            width: 100%;
            background-color: lightblue;
            border: 2px solid black;
            margin: 0 auto;
            margin-bottom: 15px;
        }
        .test{
            width: 100%;
            border: 1px solid black;
            background-color: azure;
            border-radius: 5px;
            overflow: hidden;
            box-sizing: border-box;
        }
        .content{
            border: 2px solid red;
            transition: all 0.4s;
            padding-bottom: 10px;
        }
        .foot{
            width: 100%;
            text-align: center;
            border: 1px solid red;
            background-color: aqua;
            position: relative;
            bottom: 0px;
            z-index: 999;

        }

        .sx{
            height: 100px;
        }

  </style>

html 部分

    <div class="wrap">
        <div class="test ">
            <div class="content sx">
                <div class="neirong">
                    1. 工作需求1<br />
                    2. 工作需求2<br />
                    3. 工作需求3<br />
                    4. 工作需求4<br />
                    5. 工作需求5<br />
                    6. 工作需求6<br />
                    7. 工作需求7<br />
                    8. 工作需求8<br />
                    9. 工作需求9<br />
                    10. 工作需求10<br />
                </div>
                
            </div>

            <div class="foot" onclick="toggle_fn(this)">
                展开
            </div>
            
        </div>
    </div>


    <div class="wrap">
      ......
    </div>

    <div class="wrap">
      ......
    </div>

JS部分， 注意 ， 需要引入 jquery

   function toggle_fn(ele) {
        var content = $(ele).parents(".test").find(".content")
        var neirong = $(ele).parents(".test").find(".neirong")

        if (content.hasClass("sx")) {

            content.animate({
                height: neirong.outerHeight() + "px"
            } , 100 , "linear")
            content.removeClass("sx")
            $(ele).html("折叠")
        } else {
            content.animate({
                height: 100 + "px"
            } , 100 , "linear")
            content.addClass("sx")
            $(ele).html("展开")
        }
        
    }