Question

以下是我使用的代码：

<script type="text/javascript">
    $(function(){
    // The height of the content block when it's not expanded
    var adjustheight = 130;
    // The "more" link text
    var moreText = "Click to read more...";
    // The "less" link text
    var lessText = "Click to read less...";
    // Sets the .more-block div to the specified height and hides any content that overflows
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
    // The section added to the bottom of the "more-less" div
    $(".more-less").append('<p style="display:block;margin-top:8px"><a href="#" class="adjust"></a></p>');
    $("a.adjust").text(moreText);
    $(".adjust").toggle(function() {
            $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
            // Hide the [...] when expanded
            $(this).parents("div:first").find("p.continued").css('display', 'none');
            $(this).text(lessText);
        }, function() {
            $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
            $(this).parents("div:first").find("p.continued").css('display', 'block');
            $(this).text(moreText);
    });
    });
    </script>

http://jsfiddle.net/Tqwdh/1/

它始终有＆＃34;点击此处阅读更多...＆＃34;

即使该字段短于130

的值

如何才能点击此处阅读更多...仅在div内容超过最大值时出现？

Answer 1

我认为您想要测量div容器的实际高度，并根据它可以切换您想要的任何内容。我不能完全理解你的观点。无论如何试试这个

    if( $(".more-block").height() > 130 )
    {
        $(".adjust").text(moreText);
       //other logics
    }
    else
    {
            $(".adjust").text(lessText);
           //other logics
    }

阅读更多/阅读更少问题（jQuery）

1 个答案: