javascript - jq 固定高度文字展开收起-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - jq 固定高度文字展开收起

伊谢尔伦 2017-06-29 10:09:11

[CSS3讨论组]

1460


                
目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象
                更多

这样的效果该如何实现，收起展开箭头有变化
试着写了下效果貌似不太理想，因为这里写的高度是个固定的，但是这个文字的多少是不确定的
demo

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(3)

ringa_lee2017-06-29 10:11:11 3楼

直接在p外层包上一层，外层overflow隐藏，获取p的高度设置即可；
注意p的默认margin，下面例子用父元素的padding抵消；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://at.alicdn.com/t/font_y2pevr1o81moyldi.css" rel="stylesheet" type="text/css">
    <style>
        .text{
            line-height: 1.8;
            margin:0 auto;
            width: 500px;
        }
        .text .desc{
            height:50px;
            padding: 20px 0;
            overflow: hidden;
        }

        .iconfont{
            width: 100%;
            font-size: 20px;
            text-align: center;
            cursor: pointer;
        }

    </style>
</head>
<body>
<p class="text">
    <p class="desc">
    <p class="desc-content">目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象</p>
    </p>
    <p href="javascript:void(0);" class="iconfont icon-unfold"></p>
</p>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".text").off('click').on('click','.icon-unfold', function () {
            $(".desc").animate({height: $('.desc-content').height()}, "slow");
            $(this).removeClass('icon-unfold icon-fold').addClass('icon-fold');
        }).on('click','.icon-fold', function () {
            $(".desc").animate({height: '50px'}, "normal");
            $(this).removeClass('icon-fold icon-unfold').addClass('icon-unfold');
        });
    })
</script>
</body>
</html>

赞 +0

添加回复

巴扎黑2017-06-29 10:11:11 2楼

其实挺简单的：
如果你要根据文字数量来展开或者收缩，那么你就根据文字的length来设定判断条件,当长度小于的时候format一份html，这个html上面没有图标，当长度大于规定长度时，收缩时，对所有文字字符串进行截取然后拼接一个展开的图标，这个font-awesome上面有很多，就对应然后展示到页面上，然后展开也是一样的套路，只不过不用截取字符串了，就把所有字符串拼接一个收缩的图标即可，然后分别在两个图标上面绑定事件，我在下面给了我之前实现的具体例子，代码不全，给你提供思路及实现应该是足够了

function format_html_collapse(info) {
    var expand_html = '<a href="#" class="click_expand">...点击展开 ></a>';                                                                                             
    if (info.content.length > info.max_length) {
        info.content = info.content.substring(0, info.max_length) + expand_html; 
    }

    return info.content;
}

function format_html_expand(info) {
    var collapse_html = '<a href="#" class="click_collapse">...点击收起 ></a>';
    if (info.content.length > info.max_length) {
        info.content = info.content + collapse_html; 
    }

    return info.content;
}
function to_collapse(wtable) {
    $('.click_collapse').on('click', function(e) {
       xxx.html(format_html_collapse(fc_value));
    });
    to_expand(wtable);
    });
} 
    
function to_expand(wtable) {
    $('.click_expand').on('click', function(e) {
        // 此处省略部分代码
        fe_value.td.html(format_html_expand(fe_value));
    });

    to_collapse(wtable);
});

赞 +0

添加回复