Question

我有这个很长的描述文本向用户展示。首先，它将显示此描述的一小部分。但是会有一个“更多＆gt;＆gt;”按钮打开整个说明。我怎么能通过jquery或css来做到这一点。

<div class="desc">
    <h3>Product Description</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel dui aliquam, semper mauris sit amet, imperdiet purus. Fusce convallis, nisl at imperdiet tincidunt, libero dui euismod tortor, eu ornare justo orci quis felis. Morbi volutpat felis nisl, vel interdum nulla porttitor a. Aenean est risus, malesuada a orci at, aliquam mattis ipsum. Proin porttitor metus dapibus nulla tempor scelerisque. Morbi fringilla imperdiet dui, at molestie justo rutrum mattis. Nunc in ultricies lorem. Quisque ut orci nec nibh facilisis imperdiet ac sit amet lacus. Sed tempus condimentum velit et porta. Etiam in lectus sapien. In hac habitasse platea dictumst. Integer tincidunt pulvinar lorem, vel placerat diam.</p>
</div>

修改

jsfiddle

这是我的直接想法。但它看起来并不好。每次在描述文本中添加额外的跨度都是不现实的。我想要一些干净的解决方案。

Answer 1

这适用于您，但您必须手动定义中断。如果您想以编程方式执行此操作，则应使用一个对字符进行计数并将中断放在特定位置的函数。

Updated fiddle

查看：

<div class="desc">
     <h3>Product Description</h3>

    <p>Text before the break...
    <span class="more" style="display: none;">Text after the break...</span>
     <a href="#" class="click-more">More>></a>
    </p>
</div>

jQuery的：

$('.click-more').click(function () {
    $(this).hide();
    $('.more').show();
});

Answer 2

看看this JSFiddle。我对你进行了一些编辑，并添加了两个可以在不同事件上切换的jQuery函数。我将整个字符串的值存储在页面顶部，然后在触发事件时使用子字符串截断它。您可以通过更改长度值来更改字符串的长度。如果您有任何问题，请告诉我。

var shorten = function(){
var text = $('.desc p').text();
var length = 100;
var shortString = text.substring(0, length);
$('.desc p').text(shortString); };

var unshorten = function(){
$('.desc p').text(longText);}

Answer 3

这里是一个非常简单的JavaScript解决方案。

考虑这个html：

<div class="desc">
     <h3>Product Description</h3>

    <p id="small" class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel dui aliquam, semper mauris sit amet, imperdiet purus. Fusce convallis, nisl at imperdiet tincidunt, libero dui euismod tortor, eu ornare justo orci quis felis. Morbi volutpat felis nisl, vel interdum nulla porttitor a... </p>

        <p id="big" class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel dui aliquam, semper mauris sit amet, imperdiet purus. Fusce convallis, nisl at imperdiet tincidunt, libero dui euismod tortor, eu ornare justo orci quis felis. Morbi volutpat felis nisl, vel interdum nulla porttitor a. Aenean est risus, malesuada a orci at, aliquam mattis ipsum. Proin porttitor metus dapibus nulla tempor scelerisque. Morbi fringilla imperdiet dui, at molestie justo rutrum mattis. Nunc in ultricies lorem. Quisque ut orci nec nibh facilisis imperdiet ac sit amet lacus. Sed tempus condimentum velit et porta. Etiam in lectus sapien. In hac habitasse platea dictumst. Integer tincidunt pulvinar lorem, vel placerat diam.</p>
    <a href="#" id="lnk">more >></a>
</div>

CSS：

.desc {
    background-color: #f3f3f3;
    width:400px;
    color: #555555;
}
.desc > p > span.more {
    color:blue;
    float: right;
    cursor:pointer;
}

.desc > a {
    color: #555555;
    font-weight: bold;
}

.hide {
    display:none;
}
.show {
    display:inline;
}

以及以下JavaScript：

var lnk = document.getElementById('lnk');
var small = document.getElementById('small');
var big = document.getElementById('big');

lnk.addEventListener("click", function () {
    if (small.className === 'show') {
        small.className = 'hide';
        big.className = 'show';
        lnk.innerHTML ='<< less';
    } else {
        small.className = 'show';
        big.className = 'hide';
        lnk.innerHTML ='more>>';
    }
});

您可以在此处看到：http://jsfiddle.net/jjF7R/2/

希望这有帮助!!!

Answer 4

没有额外的HTML和小化妆品css，懒惰的版本。 JSFiddle demo here

Jquery补充道：

var p = $(".desc > p");
var t = p.text();
var len = t.length;
var max_len = 150;

if (len > max_len) {
    var visible = t.substr(0, max_len);
    var hidden = t.substr(max_len, len);
    p.empty().append(visible + "<span class='dots'>...</span><span class='more-text'>" + hidden + "</span>");
    $("<span class='more'>less>>></span>").insertAfter(".more-text");
}

function showHide() {
    var button = $(".more");
    var t = (button.text() == 'more>>>') ? 'less>>>' : 'more>>>';
    button.html(t);
    $(".more-text").toggle();
    $(".dots").toggle();
}

$(".more").click(showHide);

单击更多按钮将打开长文本

4 个答案: