<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js實現內容模塊展開和收縮</title>
<style>
p{
width: 400px;
margin: 40px auto;
border: 5px solid yellow;
padding: 20px;
}
</style>
<script>
window.onload = function () {
var span = document.getElementsByTagName("span")[0];
console.log(span);
var btn = document.getElementsByTagName("a")[0];
//拿到所有文字
var str = span.innerHTML;
//設置一個開關，記錄展開和收縮
var isOn = true;
//btn添加事件，在事件里修改span文字
btn.onclick = function () {
//點擊按鈕的時候改變開關的值
isOn = !isOn;
if(isOn == true){
span.innerHTML = str;
btn.innerHTML = "收縮";
}else{
//收縮
span.innerHTML = str.substring(0, 30)+"...";
btn.innerHTML = "展開";
}
}
}
</script>
</head>
<body>
<p>
<span>
剛好遇見你，余生都是你
------願每一個等待的人最后都能精誠開，願每一個去愛的人都能被溫柔待。
今生今世，你負責美麗，我負責愛你。其他無能為力的交給風，交給雨，交給藍天白雲，交給大地海洋。
今生今世，願世界對你溫柔深情以待。免你驚，免你苦，免你四下流離，免你無枝可依。
不知何時起，你成了我心中守口如瓶的一個秘密，我不會再向別人分享你的消息，也不願與別人分享你生命里的點點滴滴。
愛本就是自私的，不自私的愛還算愛嗎？我很自私的想讓你留在身邊，於現在牽手於未來白頭。
我再愛你，亦不能替你做任何決定，也無力想去改變你的脾氣。
仔細想來不如索性對如風的你三緘其口，對生活賜予的一切照單全收。
我相信每一個等待的人最后都能精誠開，每一個去愛的人都能被溫柔待；
每一個努力的人都會有所收，每一對相愛的人都能到最后。
等我們年邁蹉跎，步履緩慢，家庭和睦美滿，兒女承歡膝下。
等我們頤養天年，不再為功名奔波，不再為生計忙碌。
若我還能鼓起勇氣，若你還願洗耳恭聽，依然會說我愛你。
用我那牙口不全的嘴唇，吻你依然美麗的臉頰。
我會洗去一身風塵疲憊，滿臉回憶的向你說起我們的前塵往事。
說一個從年少到遲暮，從青年到老去屬於我們相知相愛的故事。
你是莞爾失笑，還是潸然淚下，亦或是挽起我的手臂，如現在一樣的幸福甜蜜。
</span>
<a href="javascript:;">收縮</a>
</p>
</body>
</html>