Javascript HTML - 如何制作“阅读更多”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33986023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - How to make a "Read More" button
提问by Philippos Slicher
On my website, I have my blog and I want each card to have a read more button. I specifically want it to only show xwords (NOT characters) when collapsed, and then show the whole text when expanded. I do not want to have a button that takes to another page that has the full content, as I am using my own built CMS which automatically adds posts from a form.
在我的网站上，我有我的博客，我希望每张卡片都有一个阅读更多按钮。我特别希望它x在折叠时只显示单词（不是字符），然后在展开时显示整个文本。我不想有一个按钮转到另一个包含完整内容的页面，因为我使用的是我自己构建的 CMS，它会自动从表单添加帖子。
I have tried readmore.js but that doesnt seem to work at all. It does nothing. I have also tried jQuery.dotdotdot, which also seems to not work
我试过 readmore.js 但这似乎根本不起作用。它什么都不做。我也试过 jQuery.dotdotdot，这似乎也不起作用
This is a very strange thing that I have not been able to figure out. None other SO Q & A's have helped that I have seen.
这是一件非常奇怪的事情，我一直无法弄清楚。我所见过的其他 SO Q & A 都没有帮助。
回答by
<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>回答by Jassy Ume
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> 