如何用jQuery实现文本展开/收起功能？点击Read More无反应该如何修复

问题根源 #

代码无法触发点击效果主要存在3个问题：

• 缺失jQuery依赖：你编写的交互逻辑用了jQuery专属的语法（$选择器、slideToggle动画等），但现有HTML中没有引入jQuery库，浏览器无法识别对应API，自然不会执行交互逻辑。
• 未阻止a标签默认行为：你用作按钮的是<a>标签，默认点击会触发跳转行为（你这里href设为#，点击会默认跳到页面顶部），会干扰交互逻辑执行。
• 事件绑定时机问题：如果JS代码放在DOM元素之前加载，执行时还没渲染出.moreless-button元素，事件会绑定失败。

修复步骤 #

1. 首先在HTML的</body>结束标签之前引入jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 替换原有JS代码，增加DOM加载监听、默认行为阻止、文本去空判断逻辑：

$(document).ready(function() {
  $('.moreless-button').click(function(e) {
    // 阻止a标签默认跳转
    e.preventDefault();
    $('.moretext').slideToggle();
    // 加trim去除文本前后多余空格避免判断失效
    if ($(this).text().trim() === "Read more") {
      $(this).text("Read less")
    } else {
      $(this).text("Read more")
    }
  });
})

3. 将修改后的JS代码放在刚才引入的jQuery标签后面，同样在</body>之前即可。

修改完成后点击按钮即可正常触发文本展开收起、按钮文字切换的效果。

内容的提问来源于stack exchange，提问作者shawaiz minhas