Question

我有一个包含文字的div。要求是如果文本长度超过3行，则隐藏文本的其余部分并显示“更多...”链接。（必须将更多链接附加到可见文本，而不是显示在新行上）

点击更多链接将使div展开以显示整个文本块，而“more ..”链接将更改为“less ...”。

单击less将再次将文本折叠回3行，并且将再次出现更多链接。

只有在文本超过3行时才会发生这种情况。

我尝试使用字符数来附加更多链接，但这在响应式设计时会成为一个问题。即使在手机，平板电脑上，用户也不应该看到超过3行文字。

这是我到目前为止所拥有的。

$('.notesDiv').each(function(div) {
                var content = $(this).html();

                if (content.length > 550) {
                    content = content.substr(0, 550);
                    content += ' <a href="#" class="showMore">More...</a>';

                    $(this).html(content);
                }
            });

Answer 1

请参阅此FIDDLE

HTML

<div class='item'>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

的jQuery

function collapse(item) {

    var lineHeight = item.css('line-height') !== 'normal' ? parseInt(item.css('line-height')) : parseInt(item.css('font-size')) * 3.7;
    var height = item.height();
    if (lineHeight < height) {
        item.css({
            'height': lineHeight + 'px',
            overflow: 'hidden'
        });
        item.children('a.toggle').length == 0 && item.append("<a href='#' class='toggle'>(more)</a>");
    }
}

$('div.item').each(function () {
    collapse($(this));
});


$('a.toggle').click(function (event) {
    event.preventDefault();

    var toggle = $(this);
    var item = toggle.parent('div');
    if (toggle.text() == '(more)') {
        toggle.text('(less)');
        item.css({
            'overflow': 'auto',
            'height': 'auto'
        });
    } else {
        toggle.text('(more)');
        collapse(item);
    }
});

CSS

div.item {
    display:inline-block;
    max-width:300px;
    border:1px solid grey;
    position:relative;
    min-height:10px;
}
a.toggle {
    position:absolute;
    bottom:0px;
    right:0px;
    display:inline-block;
    background:white;
    padding-left:10px;
}

显示更多/更少的链接

1 个答案: