0

我看到了这个演示http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/并尝试实现它；如何将限制设置为 10 个字母？

<script type="text/javascript">
     document.write(str.substring(0, 29) + 
         "<a href='javascript:show('test');'>show/hide</a>");
     document.write("<style type='text/css'>.hidden{display:none}<\/style>");
     function show(area) {
         var obj = document.getElementById(area)
         obj.style.display = (obj.style.display == 'inline') ? 'none' : 'inline'
     }
</script>
<p><strong>This is the result, just test it yourself:</strong></p>

Some text has been hidden. <a href="javascript:show('test');">show/hide</a>
<span class="hidden" id="test">
    Yes, this was hidden.<br>bladiebla bladiebladiebla was also hidden.
</span>
4

2 回答 2

2

我已经包含了我对以下问题的解决方案。而不是查看字符的数量，它考虑了父级的宽度并将“预览文本”保持在一行并将其切断，因此它不会到达它的容器之外。用户可以单击“更多”按钮查看完整说明。这很有用，因为它可用于您不知道要显示的理想字符数量的响应式站点。

http://jsfiddle.net/austinpray/3xu9R/

JS（jQuery 或 Zepto）

function checkLength() {
    this.showing = new Array();
}

checkLength.prototype.check = function() {
    var that = this;
    $('.article').each(function (index) {
        var article = $(this);
        var theP = article.find('p');
        var theMore = article.find('.more');
        if (theP.width() > article.width()) {
            theMore.show();
            that.showing[index] = true;
        } else {
            if (!article.hasClass('active')) {
                theMore.hide();
                that.showing[index] = false;
            } else {
                that.showing[index] = false;
            }
        }
        theMore.text(that.showing[index] ? "More..." : "Less...");
    });
};

$(function () {
    var checker = new checkLength();
    checker.check();
    $('.more').each(function () {

        $(this).on('click', function (e) {
            $(this).closest('.article').toggleClass('active');
            checker.check();
        });
    });

    $(window).resize(function() {
        checker.check()
    });
});

编辑：添加了 show less 选项。我想有更好的方法来做到这一点。可能会通过javascript添加“更多”和“更少”，这样它就不会混淆语义。

于 2013-07-08T05:32:32.303 回答
2

在完整的演示中，有一个 jQuery 函数，其变量为var showChar = 100;.

我认为您可以将变量更改为您想要的任意数量的字符。

于 2013-07-08T04:00:52.343 回答