前端页面中展开和收起用同一按钮控制

欢迎访问个人原创博客:德鲁大叔撸代码

一、页面代码

1
2
3
4
5
<a href="javascript:showDiv();" id="ContOpen" style="font-size: 16px;color: #0f82d6">展开</a>

<div id="show" style="display: none"> id为该div的唯一标志 该div默认为 style="display: none" 收起的
一个大的div 内容为展开或者收起的部分
</div>

二、js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function showDiv() {
document.getElementById("show").style.display = "block";
document.getElementById('ContOpen').innerHTML = "收起";
document.getElementById('ContOpen').href = "javascript:hidediv();";
}

function hidediv() {
document.getElementById('show').style.display = 'none';
document.getElementById('ContOpen').innerHTML = "展开";
document.getElementById('ContOpen').href = "javascript:showDiv();";
}
</script>
坚持原创技术分享,您的支持将鼓励我继续创作!