动态切换文字和状态

Posted 2020-10-27 boyan

效果：

文字过多时，溢出隐藏，出现查看更多

点击查看更多，隐藏文字出现，查看更多变为收起

点击收回，隐藏文字收起

做法：

给查看更多添加一个状态值status：0,1根据这个状态值来切换操作状态

            $(".forum-content-wrap").on("click",".show-more",function(){
                var $this = $(this);
                var status = $(this).attr("data-status");
                if(status == ‘0‘){
                    $this.attr("data-status",‘1‘);
                    $this.prev("p").css("height","auto");
                    $this.parent(".item-text").css("height","auto");
                    $this.text("收起");
                }else{
                    $this.attr("data-status",‘0‘);
                    $this.prev("p").css("height","120");
                    $this.text("查看更多>>");
                }
            });

页面代码

    $("#main").find(".forum-content-list").each(function(){    
        var p = $(this).find(".item-ct");
        var h = p.height();
        console.log(h)
        if(h>140){
            p.height(120);
            p.css("overflow","hidden");
            var more = ‘<span class="show-more" data-status="0">查看更多>></span>‘;
            p.after(more);
        }else{
            
        }
    })