本帖最后由 东篱 于 2023-7-4 20:32 编辑
你想实现这个效果吗:
点击这里,里面有个大宝贝哈哈,你被骗了。。。收起
方法:
登录discuz后台 - 界面 - 编辑器设置 - Discuz! 代码,然后添加一个 summary 标签,进入 详情:
标签:summary
替换的内容:
<details style="position: relative;"><summary>{1}</summary><content>{2}</content><div style="position:absolute;right:calc(50% - 22px);bottom:0;background:#999;color:#fff;padding:0 10px;line-height:20px;font-size:12px;cursor:pointer;" class="showcollapse_gather" on_Click="this.parentNode.firstChild.click();">收起</div></details>
注意:上面代码的 on_Click 去掉下划线
例子:<details><summary>点击展开</summary>{2}</details>
解释:折叠内容
参数个数:2
参数提示语:
嵌套次数:2
允许使用此代码的用户组:这里必须设置;
然后,进入:template/default/common/module.css 找到 帖子正文区块 在其下面另起新一行,填入:
details{border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
details[open] {padding-bottom: 25px;}
summary{display:inline-block;text-align:center;vertical-align:middle;display:flex;margin:0.4em 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline: 0;}
summary:before{content:'+';background:#c8d7de;color:#444;line-height:1.7em;padding:0px 0.3em 0px;border:none;border-radius:0.25em;margin:0.1em 0.4em 0.1em 0.4em;display:flex;align-items:center;justify-content:center;width:0.9em;text-align:center;font-family:Verdana,Tahoma,Arial,"Microsoft YaHei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;font-size:11px;vertical-align:middle;}
details[open] summary:before{content:'−';}
details table.t_table{background:#f1f1f1a3;border:1px solid #dadfdd;width:100% !important;margin-bottom:0.5em;}
summary::marker {content: '';}
details:focus-visible,summary:focus-visible{outline:none;}
参考:https://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux
|