当前位置：文江博客话题详情

静态博客静态页面 hugo

静态页面如何设置长文章自动折叠？

发布于 2022-09-03 15:18:04 字数 108 浏览 26 评论 0

请教一下静态页面中的长文章能否实现自动折叠效果？就是博客超出一定字数后只显示一部分，然后用户点击“阅读更多”能够直接把折叠打开，但不会跳转到新的页面去。

如果可以，请问应该如何实现呢？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

深空失忆 2022-09-10 15:18:04

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        font: 14px/1.5 '微软雅黑';
    }
    
    .article {
        position: relative;
        height: 40px;
        overflow: hidden;
    }
    
    .article__many {
        position: absolute;
        top: 20px;
        right: 5px;
        background-color: #fff;
        padding: 0px 7px;
        border-radius: 3px;
        cursor: pointer;
    }
    
    .h-auto {
        height: auto!important;
    }
    
    .s-hidden {
        display: none;
    }
    </style>
</head>

<body>
    <article class="article">
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
        <span class="article__many" id="J-many">阅读更多>></span>
    </article>
    <script type="text/javascript">
    document.getElementById('J-many').addEventListener('click', function(e) {
        var curTarget = e.currentTarget;
        curTarget.setAttribute('class', 's-hidden');
        curTarget.parentElement.setAttribute('class', 'article h-auto');
    });
    </script>
</body>

</html>

~没有更多了~

关于作者

一腔孤↑勇

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文