Question

我有六个盒子，每个盒子包含一个段落，每个段落都有不同的内容。字符限制设置为200个字符。在200个字符后，其余内容（如果有）将被隐藏，直到用户点击Show More链接。

当用户点击Show Less链接时，文字显示会返回到字符数限制。但事实并非如此;当用户点击Show More链接时，会显示所有内容，但当用户点击Show Less链接时，内容不会收缩。

我看到其他关于节目和隐藏内容的SO帖子，但在实施他们的答案以努力解决我的问题之后，我仍然迷失了。这是我第一次实现jQuery，所以请原谅我在这样一个小学阶段的困惑。

对于Show Less不签约内容的原因提出任何建议表示赞赏。

<div class="col-md-8" id="article">
    <?php 
      $text = $page->Article_Text;
    ?>

    <script>
      $(document).ready(function(){
          var readMoreHTML = $(".read-more").html();
          var lessText = readMoreHTML.substr(0, 200);

          if(readMoreHTML.length > 200){
              $(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
          } else{
              $(".read-more").html(readMoreHTML);
          }
          $("body").on("click", ".read-more-link", function(event){
              event.preventDefault();
              $(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>");
          });
              $("body").on("click", ".show-less-link", function(event){
                event.preventDefault();
                $(this).parent(".read-more").html(readMoreHTML.subtr(0,200)).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
          });
      });
    </script>


    <div class="content">
       <div class="read-more">
           <?php echo $text ?>
        </div>
    </div>

</div><!--#article-->

（请原谅内联CSS，因为它仅用于测试目的）。

Answer 1

在JS的最后一部分中，只需使用您的lessText变量即可。 jQuery .html()方法无法接受readMoreHTML.subtr(0,200)作为输入。

$(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");

工作代码： http://codepen.io/staypuftman/pen/akZdzg

此外还附带运行代码。你可以查看输出

＆＃13;

    $(document).ready(function () {
        var readMoreHTML = $(".read-more").html();
        var lessText = readMoreHTML.substr(0, 200);

        if (readMoreHTML.length > 200) {
            $(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
        } else {
            $(".read-more").html(readMoreHTML);
        }
        $("body").on("click", ".read-more-link", function (event) {
            event.preventDefault();
            $(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>");
        });
        $("body").on("click", ".show-less-link", function (event) {
            event.preventDefault();
            $(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="read-more">
    Details of G.M.’s decision-making process almost 20 years ago, which has not been reported previously, suggest that a quest for savings of just a few dollars per airbag compromised a critical safety device, resulting in passenger deaths. The findings also indicate that automakers played a far more active role in the prelude to the crisis: Rather than being the victims of Takata’s missteps, automakers pressed their suppliers to put cost before all else.
</div>

＆＃13;

点击

1 个答案: