使用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來展開/摺疊文本

回答

相關問題