时间戳

首页 > 解决方案 > 阅读更多功能

javascript - 阅读更多功能

问题描述

我正在尝试提出一种解决方案，为页面上的一堆框添加阅读更多功能。

我看到的最简单的解决方案是：https ://www.w3schools.com/howto/howto_js_read_more.asp但问题是内容由 cms 控制，因此无法手动添加跨度等。此外，本例中的 JS 仅在第一条内容上激活，因此不适用于多条内容。

我一直在考虑创建一些 js 来查找 div 类并在一定数量的字符数/单词/基于 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>

再加上几次。为了清楚起见，我删除了不相关的元素。

如果我愿意接受建议，那么我可能只是在寻找错误的方向。

非常感谢。

标签： javascriptjqueryhtmlcss

解决方案

这是一个非常适合您给我的确切代码的解决方案，只要每个 div 有一个段落，其中只有纯文本。但是，如果您将 HTML 添加到段落中（不仅仅是纯文本），或者如果您希望每个supp-item-bodydiv 中有多个段落，那么您将不得不稍微调整代码。请注意，此解决方案使用 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>

推荐阅读