阅读更多功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了阅读更多功能相关的知识，希望对你有一定的参考价值。
我正在尝试提出一种为页面上的一堆盒子添加更多阅读功能的解决方案。
我看到的最简单的解决方案是：https://www.w3schools.com/howto/howto_js_read_more.asp，但是问题在于内容是由cms控制的，因此手动添加跨度等不是一个选择。另外，此示例上的JS仅在第一条内容上激活，因此不适合多条内容。
我一直在寻找创建一些div类的js，并根据div的高度在一定数量的字符数/单词/单词中添加功能，但是到目前为止，我还找不到合适的解决方案。同样理想的是，如果文本低于限制，则完全不会显示“阅读更多”按钮。
供参考，是我的html的简化版本：
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
</div>
</div>
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
</div>
</div>
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
</div>
</div>
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
</div>
</div>
那再加上几次。为了清楚起见，我删除了不相关的元素。
如果我愿意接受建议，可能是我朝错误的方向看。
非常感谢。
答案
这是一个解决方案，非常适合您给我的确切代码，只要每个div都有一个段落，且其中仅包含纯文本即可。但是，如果将HTML添加到段落中（不只是纯文本），或者要在每个supp-item-body div中包含多个段落，则必须稍微调整代码。请注意，此解决方案使用jQuery，您已将它添加为问题的标记，因此，我假设您已经在项目中使用了它。
只需将其复制并粘贴到空白的.html文件中，然后在Chrome浏览器中将其打开即可查看效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Atheism includes any philosophy which claims that no God or gods exist, including any rational or reasoning creator of the universe. However, if premises begin to exist without reason, then conclusions drawn from them are also without reason. If there is no god, all initial human premises about the external world begin to exist without reason. Therefore, if there is no god, all human conclusions about the external world are also without reason.</p>
</div>
</div>
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Polytheism refers to any philosophy which claims that there are multiple supreme creators of the universe. However, if anyone is not the author of every aspect of creation, then his authority is insufficient to rationally guarantee the behavior of creation. Under polytheism, no one is the author of every aspect of creation. Therefore, under polytheism, no one has the authority to rationally guarantee the behavior of creation.</p>
</div>
</div>
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
</div>
</div>
<div class="col-sm-12">
<div class="supp-item-body">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.supp-item-body p').each(function(i, el)
var p = $(el);
var pTxt = p.text();
if (pTxt.length > 120)
var pTxtA = pTxt.substring(0, 120);
pTxtA = pTxtA.substring(0, pTxtA.lastIndexOf(' '));
pTxtB = pTxt.substring(pTxtA.length + 1);
var pHtml = pTxtA + '<span class="dots">...</span> <span class="more-text" style="display: none;">' + pTxtB + '</span>';
p.html(pHtml);
var btn = $('<button>Read more</button>')
btn.unbind('click.more').bind('click.more', function(e)
e.preventDefault();
p.find('.more-text').toggle();
p.find('.dots').toggle();
);
p.after(btn);
);
</script>
</body>
</html>
以上是关于阅读更多功能的主要内容，如果未能解决你的问题，请参考以下文章