HTML -如何制作“阅读更多”按钮
HTML -如何制作“阅读更多”按钮
提问于 2015-11-30 01:55:33
在我的网站上，我有我的博客，我希望每张卡都有一个阅读更多的按钮。我特别希望它在折叠时只显示x单词(而不是字符)，然后在展开时显示整个文本。我不想有一个按钮，带到另一个页面，有完整的内容，因为我正在使用我自己建立的CMS，它自动添加从一个表单的帖子。
我试过readmore.js，但似乎一点也不起作用。它什么也做不了。我也试过jQuery.dotdotdot，它似乎也不起作用
这是一件非常奇怪的事情，我还没有弄清楚。据我所知，没有其他的问答对此有帮助。
回答 3
Stack Overflow用户
发布于 2018-07-05 06:31:35
<p><a onclick="javascript:ShowHide('HiddenDiv')">read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;"><font face="Arial" size="+2"
color="#306Eff" align="right">put the rest of the text here
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>
Stack Overflow用户
发布于 2020-05-13 20:53:29
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
} <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
Stack Overflow用户
发布于 2020-12-25 18:18:32
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader1 {
position: inherit;
top:inherit;
left: 0;
right:0;
text-align: center;
z-index: 1;
width: 50px;
height: 50px;
margin: auto;
}
.loader1:before {
content: '';
display: block;
padding-top: 200%;
}
.circular1{
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100%;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
width: 100%;
position: inherit;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path1{
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@-webkit-keyframes
rotate { 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes
rotate { 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes
dash { 0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@keyframes
dash { 0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@-webkit-keyframes
color { 100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
@keyframes
color { 100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
.myDiv1 {
display: none;
}
</style>
<style>
.loadmorex {
position: absolute;
left: 0;
right:0;
text-align: center;
z-index: 1;
margin: auto;
color: #fff !important;
letter-spacing:04px;
text-decoration: none;
background: #00aeef;
padding: 10px;
width:15%;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.loadmorex:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
</style>
<!-- loader 2 -->
</head>
<!-- By Suntrident.com-->
<h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p> <h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p>
<!--For Loading Part 1-->
<div id="loader1" class="loader1" style="display:none;" >
<svg class="circular1" viewBox="25 25 50 50">
<circle class="path1" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg><strong>Loading..</strong></div>
<div style="display:none;" id="myDiv1" class="animate-bottom">
<h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p><h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p>
</div>
<button class="loadmorex" id="hideme" onclick="myFunction()" type="button">Load more</button>
<!--TIP : CHECK ALL ID NAME MATCH-->
<!-- By Suntrident.com-->
<br><br><br><br><br><br>
<script>
var myVar;
function myFunction() {
// on button click below line displays loader :
document.getElementById("loader1").style.display = "block";
// on button click below line hides button:
document.getElementById("hideme").style.display = "none";
// set on-timeout display content in below line:
myVar = setTimeout(showPage, 2000);
}
function showPage() {
document.getElementById("loader1").style.display = "none";
document.getElementById("myDiv1").style.display = "block";
}
</script>
<!-- By Suntrident.com-->
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33986023
复制相关文章
相似问题