通过jQuery实现文本展开及收缩折叠特效代码

前言

这是一款jquery实现的点击伸缩与展开的菜单代码

操作方式很简洁，点击展开内容，再次点击则合拢，非常经典的折叠效果

方案

CSS样式代码

.wenben {position: relative;overflow: hidden;max-height: 9.5vw;transition: all .25s;}
.wenben.more {max-height:none;}
.wenben .more::after {content: "展开↓";display: block;position: absolute;z-index: 22;bottom:-1.0vw;
right:0vw;font-size: .345rem;color: rgb(255,162,28);background-color: rgb(255,255,255);padding: 1vw 3vw 1vw 1vw;cursor: pointer}
.wenben .more.ed {margin-top:0.3rem;}
.wenben .more.ed::after {content:"收起↑";}

html主体代码

<div class="wenben">
    <div class="entity">
    	要折叠的内容<br>
    	要折叠的内容<br>
    	要折叠的内容<br>
    	要折叠的内容<br>
    	要折叠的内容<br>
    	要折叠的内容<br>
    	要折叠的内容	
    </div>
    <div class="more"></div>
</div>

jQuery功能实现代码

$(".more").click(function(){
    if($(this).hasClass("ed")){
        $(this).removeClass('ed');
        $('.wenben').removeClass('more');
    }else{
        $(this).addClass('ed');
        $('.wenben').addClass('more');
    }
});

说明

请根据自己实际情况做相应修改
如有什么BUG或者疑问欢迎各路大神补充&指正