在你的html界面插入类似于论坛的折叠按钮-小教学
首先，在需要插入折叠的地方引入下面的代码（按钮上的文本要修改的话直接修改value元素后面双引号中的文本即可）<div class="spoiler"><div class="spoilerheader"><input type="button" class="zd" value="点击展开折叠内容" onClick="n = this.parentNode.parentNode.lastChild;if(n.style.display == 'none') {n.style.display = 'block';} else {n.style.display = 'none';} return false;"/></div><div class="spoilerbody" style="display: none;border-style:groove;padding-right:5px; "><table><td>
折叠的内容<br/>
</td></table></div></div>
这样其实就可以用了，就是有点丑
https://s1.ax1x.com/2022/12/12/z4rY7T.png
可以把下面的代码插到页面的<head>区域让按钮更好看点，还可以自定义修改按钮的背景色
<style>
.zd {
background-color:#33FF33;
border:1px solid #33FF33;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
padding:15px 32px;
text-decoration:none;
text-shadow:0px 1px 0px #33FF33;
}
.zd:hover {
background-color:#33FF33;
}
.zd:active {
position:relative;
top:1px;
}
</style>
https://s1.ax1x.com/2022/12/12/z4rR4e.png 很好
但是看不懂[贴吧_汗] <div class="spoiler"><div class="spoilerheader"><input type="button" class="zd" value="点击展开折叠内容" onClick="n = this.parentNode.parentNode.lastChild;if(n.style.display == 'none') {n.style.display = 'block';} else {n.style.display = 'none';} return false;"/></div><div class="spoilerbody" style="display: none;border-style:groove;padding-right:5px; "><table><td>
测试<br/>
</td></table></div></div> 试试
页: [1]