使用jQuery来展开/折叠文本

我想根据固定高度来切断文本。当文本被切断时，会使用“更多”链接来展开文本。当文本展开时，使用“少”链接折叠文本。我写的JS，因为这：使用jQuery来展开/折叠文本

$(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>

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

来源

2012-07-10 Yujun Wu

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

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

应该是这样的：

if (text.height() > maxheight) {

FIDDLE

来源

2012-07-10 07:30:50 adeneo

我相信你正在寻找这样一个

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-10 07:19:52 Rafee

使用jQuery来展开/折叠文本

回答

相关问题