静态博客 - 静态页面如何设置长文章自动折叠？
本文介绍了静态博客 - 静态页面如何设置长文章自动折叠？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
请教一下静态页面中的长文章能否实现自动折叠效果？就是博客超出一定字数后只显示一部分，然后用户点击阅读更多能够直接把折叠打开，但不会跳转到新的页面去。
如果可以，请问应该如何实现呢？
解决方案
<!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>这篇关于静态博客 - 静态页面如何设置长文章自动折叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
