Question

我希望使用JQuery显示更多/更少。我通过谷歌搜索了几个例子，但都没有工作。没什么好看的，我只需要将一段文字剪切到特定的高度，并且链接会扩展/隐藏其他文字。

Answer 1

这应该通过单击实际div来切换完整div的显示，您可以将click事件添加到您想要的任何触发器。

<强> HTML：

<div id="blah">
    Long...Content
</div>

<强>使用Javascript：

$('#blah').css({height:'20px', overflow:'hidden'});
$('#blah').on('click', function() {
    var $this = $(this);
    if ($this.data('open')) {
        $this.animate({height:'20px'});
        $this.data('open', 0);

    }
    else {
        $this.animate({height:'100%'});
        $this.data('open', 1);
    }
});

最初使用javascript显示较少不会无限期地为没有启用javascript的用户隐藏div。

Answer 2

您可以使用更多或更少的jQuery。您可以在此处看到demo

Answer 3

使用此插件

http://plugins.learningjquery.com/expander/index.html

在没有拼接文本的html内容的情况下，它会增加或减少。

Answer 4

未经测试，但应该有效：

<div style="height:500px;overflow:hidden" id="blah">
Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.
</div>
<a href="#" id="showmore">Show more</a>
<script>
$("#showmore").live('click', function() {
   $("#blah").css('height','1000px');

});
</script>

Answer 5

快速而肮脏的样本：

<style>
.collapsed {height:50px; overflow:hidden}
</style>

<script>
$(function() {
  $(".expander").click(function() { $("div").toggleClass("collapsed"); });
})
</script>
<div class="collapsed">LOTS AND LOTS OF TEXT LOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXT</div>
<span class="expander">Expand/Collapse</span>

Answer 6

我的解决方案有点不同。

  function SetMoreLess(para, thrLength, tolerance, moreText, lessText) {
        var alltext = $(para).html().trim();

        if (alltext.length + tolerance < thrLength) {
            return;
        }
        else {
            var firstHalf = alltext.substring(0, thrLength);
            var secondHalf = alltext.substring(thrLength, alltext.length);

            var firstHalfSpan = '<span class="firstHalf">' + firstHalf + '</span>';
            var secondHalfSpan = '<span class="secondHalf">' + secondHalf + '</span>';
            var moreTextA = '<a class="moreText">' + moreText + '</a>';
            var lessTextA = '<a class="lessText">' + lessText + '</a>';

            var newHtml = firstHalfSpan + moreTextA + secondHalfSpan + lessTextA;

            $(para).html(newHtml);
        }
    }

逻辑是将长度内容分成两部分并隐藏第二部分。第二部分使用“显示更多”链接显示。您可以在此处找到完整的详细信息，http://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.html。

使用JQuery显示更多显示

6 个答案: