码迷,mamicode.com
首页 > 其他好文 > 详细

JQ多行文本溢出省略号插件

时间:2017-07-25 18:02:12      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:jquery   scl   des   images   买房   this   com   --   分享   

一、引入jq和jquery.dotdotdot.min.js

二、html结构

技术分享

点击之后

技术分享

<div class="detail-content">
<p>新房和二手房各有优缺点。主要有一下区别:</p>
<p> 1、交易条件不同 </p>
<p>开发商将新房出售给购房者的前提条件是:开发商需要 取得五证二书。</p>
<p> 2、买房首付、贷款额度不同 </p>
<p>开发商将新房出售给购房者的前提条件是:开发商需要 取得五证二书。</p>
<p> 3、交易条件不同 </p>
<p>开发商将新房出售给购房者的前提条件是:开发商需要 取得五证二书。</p>
</div>
<!--全部按钮-->
<div class="all-btn">
<button type="button">全部</button>
</div>

三、css样式

//答内容
        .detail-content {
            padding-left: 0.4rem;
            height: 1.3rem;
            overflow: hidden;
            p {
                font-size: 0.28rem;
                line-height: 1.5;
                color: @color-txt-subtitle;
            }
        }
        .opened{
            height: auto;
        }

四、插件使用

//点击全部按钮,展开内容
        var $dot = $(.detail-content);
            $dot.dotdotdot({});
        $("#hot-questio-list").on(click,button,function() {
            var $detail=$(this).parent().siblings(.detail-content);
                $detail.toggleClass(opened);
                if($dot.hasClass(opened)) {
                    $detail.trigger(destroy);
                    $(this).text(折叠);
                } else {
                    $detail.dotdotdot({});
                    $(this).text(全部);
                }
                return false;
            }
        );

JQ多行文本溢出省略号插件

标签:jquery   scl   des   images   买房   this   com   --   分享   

原文地址:http://www.cnblogs.com/xzma/p/7235324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!