Question

我想根据固定的高度剪切文本。当文本被剪切时，使用“更多”链接扩展到文本。文本扩展时，使用“较少”链接折叠文本。我写了这个js：

$(document).ready(function () {
      // line height in 'px'
      var maxheight=218;
      var showText = "More";
      var hideText = "Less";

      $('.textContainer_Truncate').each(function () {
        var text = $(this);
        if (text.height() > maxheight){
            text.css({ 'overflow': 'hidden','height': maxheight + 'px' });

            var link = $('<a href="#">' + showText + '</a>');
            var linkDiv = $('<div></div>');
            linkDiv.append(link);
            $(this).after(linkDiv);

            link.click(function (event) {
              event.preventDefault();

              if (text.css('height') == 'auto') {
                  $(this).html(showText);
                  text.css('height', maxheight + 'px');
              } else {
                  $(this).html(hideText);
                  text.css('height', 'auto');
              }
            });
        }       
      });
  });

html代码是：

<div class="textContainer_Truncate">
  <p>content</p>
</div>

我的问题是“更多”链接有效，但“更少”没有。也就是说，当点击更多时，文本会被扩展，但是当点击的数量较少时它不会返回。这里有什么问题？感谢

Answer 1

这只是一个小错误，这个：

if (text.css('height') == 'auto') {

应该是这样的：

if (text.height() > maxheight) {

FIDDLE

Answer 2

我相信你正在寻找这个

http://jsfiddle.net/rbUst/

$(".act").click(function() {
  var val = $(this).text();
  if (val == "More") {
    $("div").css('height', '200px');
    $(this).text("less");
  } else {
    $("div").css('height', '20');
    $(this).text("More");
  }
  return false;
});

div {
  background-color: #CCA;
  height: 20px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="" class="act">More</a> 
<div>This fskdljfl sflsdajfsadf
  <br />fsdafsdfsadfsdf dfjsadf slfkjsf</div>

以上是实例..

使用jQuery扩展/折叠文本

2 个答案: