4

我想根据固定的高度截断文本。当文本被截断时，使用“更多”链接扩展为文本。展开文本时，会使用“较少”链接来折叠文本。我把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>

我的问题是“更多”链接有效，但“更少”链接无效。也就是点击more的时候，文本被展开，但是点击less的时候不会返回。这里有什么问题？谢谢

4

2 回答 2

5

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

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

应该是这样的：

if (text.height() > maxheight) {

小提琴

于 2012-07-10T07:30:50.110 回答
0

我相信你在看这个

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>

以上是活生生的例子..

于 2012-07-10T07:19:52.043 回答