UID5206性别保密经验 EP铁粒 粒回帖0主题精华在线时间 小时注册时间2020-5-24最后登录1970-1-1
|
首先,在需要插入折叠的地方引入下面的代码(按钮上的文本要修改的话直接修改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>
复制代码
这样其实就可以用了,就是有点丑

可以把下面的代码插到页面的<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>
复制代码
 |
|