4

固定の高さに基づいてテキストを切り取りたい。テキストが切り取られると、「詳細」リンクを使用してテキストに展開されます。テキストが展開されると、「less」リンクを使用してテキストが折りたたまれます。私は次のように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」は機能しないことです。つまり、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 に答える