Jquery 单击时不隐藏文本

我有六个框，每个框包含一段内容不同的内容。字符限制设置为200个字符。200个字符后，剩余内容（如果有）将隐藏，直到用户单击

显示更多

链接

当用户单击

Show Less

链接时，文本显示返回到字符限制。然而，事实并非如此；当用户单击“显示更多”链接时，将显示所有内容，但当用户单击“显示较少”链接时，内容不会收缩

我看到了其他关于显示和隐藏内容的SO帖子，但在实现了他们的答案以解决我的问题后，我仍然迷路了。这是我第一次实现jQuery，所以请原谅我在这么初级的层次上的困惑

对于<代码>显示较少的内容不受影响的原因，如有任何建议，我们将不胜感激

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

$（文档）.ready（函数（）{
var readMoreHTML=$（“.readmore”）.html（）；
var-lessText=readMoreHTML.substr（0200）；
如果（readMoreHTML.length>200）{
$（“.read more”）.html（lessText.append（“”）；
}否则{
$（“.readmore”）.html（readmorethtml）；
}
$（“正文”）。在（“单击”，“阅读更多链接”，函数（事件）{
event.preventDefault（）；
$（this.parent（“.readmore”）.html（readmorethtml）.append（“”）；
});
$（“正文”）。在（“单击”，“显示较少链接”，函数（事件）{
event.preventDefault（）；
$（this.parent（“.readmore”）.html（readmorethtml.subtr（0200））.append（“”）；
});
});

---

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

在JS的最后一部分中，只需使用

lessText

变量即可。jQuery

.html（）

方法无法接受

readmorethtml.subtr（0200）

作为输入

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

$（this.parent（“.read more”）.html（lessText.append（”）；

工作代码笔：

并且运行附加在这里的代码。您可以检查输出

$（文档）.ready（函数（）{
var readMoreHTML=$（“.readmore”）.html（）；
var-lessText=readMoreHTML.substr（0200）；
如果（readMoreHTML.length>200）{
$（“.read more”）.html（lessText.append（“”）；
}否则{
$（“.readmore”）.html（readmorethtml）；
}
$（“正文”）。在（“单击”，“阅读更多链接”，函数（事件）{
event.preventDefault（）；
$（this.parent（“.readmore”）.html（readmorethtml）.append（“”）；
});
$（“正文”）。在（“单击”，“显示较少链接”，函数（事件）{
event.preventDefault（）；
$（this.parent（“.readmore”）.html（lessText.append（”）；
});
});

近20年前，通用汽车公司的决策过程的细节（以前没有报道过）表明，寻求每个安全气囊只节省几美元就破坏了一个关键的安全装置，导致乘客死亡。调查结果还表明，汽车制造商在危机的前奏中扮演了更为积极的角色：汽车制造商不是高田失误的受害者，而是向供应商施压，要求他们将成本放在首位。
第一个建议是将脚本放在结束标记之前。第二-在属性（
href
和
class
）之间留出一些空间。请提供一个最小的工作示例（无php），我（或其他人）可以帮助您轻松输入：
subtr
应该是
subtr
。这是真代码还是复制错误？@Barmar谢谢！我觉得很愚蠢，但是在MDN上，
substr
被标记为“不推荐”。谢谢。从技术上讲，这是
substr
中的一个输入错误，用变量替换它也可以解决或纠正输入错误。很好，我甚至没有看到这一点。