Minecraft(我的世界)小黑论坛——我的世界JAVA版，我的世界基岩版，我的世界资源网，我的世界玩家论坛，我的世界手机版，基岩版论坛，我的世界电脑版，我的世界国际版

标题: 在你的html界面插入类似于论坛的折叠按钮-小教学 [打印本页]
作者: 小永高吖    时间: 2022-12-12 22:07
标题: 在你的html界面插入类似于论坛的折叠按钮-小教学
首先，在需要插入折叠的地方引入下面的代码（按钮上的文本要修改的话直接修改value元素后面双引号中的文本即可）

  1. <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>
  2. 折叠的内容<br/>
  3. </td></table></div></div>
复制代码


这样其实就可以用了，就是有点丑


                               
登录/注册后可看大图


可以把下面的代码插到页面的<head>区域让按钮更好看点，还可以自定义修改按钮的背景色

  1. <style>
  2. .zd {
  3.     background-color:#33FF33;
  4.     border:1px solid #33FF33;
  5.     display:inline-block;
  6.     cursor:pointer;
  7.     color:#ffffff;
  8.     font-family:Arial;
  9.     font-size:16px;
  10.     padding:15px 32px;
  11.     text-decoration:none;
  12.     text-shadow:0px 1px 0px #33FF33;
  13. }
  14. .zd:hover {
  15.     background-color:#33FF33;
  16. }
  17. .zd:active {
  18.     position:relative;
  19.     top:1px;
  20. }
  21. </style>
复制代码



                               
登录/注册后可看大图
作者: 我的水世界    时间: 2022-12-13 10:12
本帖最后由 我的水世界 于 2022-12-13 10:14 编辑

不错，很实用

                               
登录/注册后可看大图

                               
登录/注册后可看大图


不过我赞点成踩了

                               
登录/注册后可看大图
撤不掉了



欢迎光临 Minecraft(我的世界)小黑论坛——我的世界JAVA版，我的世界基岩版，我的世界资源网，我的世界玩家论坛，我的世界手机版，基岩版论坛，我的世界电脑版，我的世界国际版 (https://forum.blmcpia.com/) Powered by Discuz! X3.4