Readmore.js插件无法正常工作的问题排查求助

嘿，我来帮你捋捋Readmore.js没生效的问题，我之前折腾这个插件的时候也踩过不少坑，一步步排查肯定能解决～

1. 先搞定插件的引入问题 #

你提到Readmore.js用的是http开头的链接，这里有个常见坑：

• 如果你的页面是https协议，浏览器会自动阻止不安全的http资源加载，直接导致插件没装上。建议换成HTTPS的CDN链接，或者把插件文件下载到本地引入。
• 直接在浏览器地址栏打开那个Readmore.js的链接，确认能正常加载出代码，要是打不开就是链接本身有问题。

2. 确保代码在DOM加载完再跑 #

Readmore.js得找到目标元素才能干活，如果你的$('article').readmore();写在<article>元素前面，插件压根找不到要处理的内容，自然没反应。解决办法二选一：

• 把调用代码挪到页面最底部，也就是</body>标签的前面；
• 用jQuery的DOM就绪函数把代码包起来：

$(document).ready(function() {
  $('article').readmore();
});

3. 检查内容长度是否达标 #

Readmore.js默认只会对高度超过200px的内容生效（这个阈值可以改）。如果你的<article>内容太短，插件就不会显示“阅读更多”按钮。可以手动设置高度测试下：

$('article').readmore({
  collapsedHeight: 100 // 改成适合你内容的高度数值
});

4. 确认版本兼容性 #

你用的是jQuery 3.3.1，要确保Readmore.js的版本支持这个jQuery版本。有些旧版插件对jQuery 3.x的兼容不太好，建议换最新版的Readmore.js试试。

5. 看看浏览器控制台的报错信息 #

按F12打开浏览器开发者工具，切到Console标签，看看有没有红色报错：

• 要是出现$ is not defined：说明jQuery没加载成功，检查jQuery的引入链接和顺序；
• 要是出现readmore is not a function：要么Readmore.js没加载成功，要么你把它的引入顺序放在jQuery前面了（必须先加载jQuery，再加载Readmore.js）。

6. 确认选择器没写错 #

先确认页面里真的有<article>元素，在控制台输入$('article')，看看返回的元素集合是不是空的。如果你的文章用的是其他标签（比如<div class="article">），就得把选择器改成$('.article').readmore();

内容的提问来源于stack exchange，提问作者Artur Galata