我需要创建一个显示更多/更少的文本功能,但只使用JavaScript和HTML ..我不能使用任何额外的库,如jQuery,它不能用CSS完成.我添加的示例代码显示“更多”文本,但不显示“更少”.
如果有人能指出我正确的方向,那将非常感激.
我花了大半天的时间在我的脑子上煎炸,因为它显然不是现代的做法,但是,我的HTML是：
<html>
<head>
<script type="text/javascript" src="moreless.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet
<p>
<p id="textarea"><!-- This is where I want to additional text--></div>
</p>
<a onclick="showtext('text')" href="javascript:void(0);">See More</a>
<p>
Here is some more text
</body>
</html>
我的JavaScript是(moreless.js)：
function showtext()
{
var text="Here is some text that I want added to the HTML file";
document.getElementById("textarea").innerHTML=text;
}
解决方法
我的答案类似但不同,有几种方法可以实现切换效果.我想这取决于你的情况.这可能不是最终的最佳方式.
您一直在寻找的缺失部分是创建一个if语句.这允许您切换文本.
JSFiddle：http://jsfiddle.net/8u2jF/
使用Javascript：
var status = "less";
function toggleText()
{
var text="Here is some text that I want added to the HTML file";
if (status == "less") {
document.getElementById("textArea").innerHTML=text;
document.getElementById("toggleButton").innerText = "See Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").innerHTML = "";
document.getElementById("toggleButton").innerText = "See More";
status = "less"
}
}