点击按钮,文字可以进行相应的展开与收起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="p1">
20世纪20年代末,上海百货巨子易氏家族遭遇承继危机,易兴华因独子易钟杰弃商从医,决定从长女钟灵、次女钟玉、幼女钟秀之中,择出一位家族继承人。钟灵乃名门淑女,典雅文静。钟玉由南洋巨贾外祖抚养,精明能干。钟秀留学美国,浪漫天真。三位千金生母不同、脾性不投、成长环境迥异,为继承星华百货,三人屡出奇招,各展所长。易兴华未料三凤还巢引发轩然大波,恐伤及骨肉之情,迟迟无法选定最终继承人。
</p>
<button id="shouqi" onclick="split()">收起 </button>
<script>
var on=1;
function split() {
var p1 = document.getElementById("p1");
var but1 = document.getElementById("shouqi");
if (on) {
p1.innerHTML = "20世纪20年代末,上海百货巨子易氏家族遭遇承继危机,易兴华因独子易钟杰弃商从医,决定从长女钟灵、";
but1.innerHTML = '展开'
on=0;
}
else {
p1.innerHTML = "20世纪20年代末,上海百货巨子易氏家族遭遇承继危机,易兴华因独子易钟杰弃商从医,决定从长女钟灵、次女钟玉、幼女钟秀之中,择出一位家族继承人。钟灵乃名门淑女,典雅文静。钟玉由南洋巨贾外祖抚养,精明能干。钟秀留学美国,浪漫天真。三位千金生母不同、脾性不投、成长环境迥异,为继承星华百货,三人屡出奇招,各展所长。易兴华未料三凤还巢引发轩然大波,恐伤及骨肉之情,迟迟无法选定最终继承人。
but1.innerHTML = '收起'
}
}
</script>
</body>
</html>