问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
hhss1
    923

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

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

    静态页面静态博客hugo
    阅读 3.7k
    1 个回答
    得票最新
    头像
    acrens
      490138
      ✓ 已被采纳
      <!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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题