折叠内容(till_spoiler)【首发】
Tillreetree 2021-7-17

插件介绍

如其他论坛程序(如Discuz)那样:[spoiler]隐藏内容[/spoiler]。和“登录可见插件”一个用法。

使用了HTML5的<details>标签。

 

截图展示

下载

见附件。


附赠:美化折叠框样式

本插件不附带任何样式,以便站长自行设计符合自己网站风格的框。

若您不会CSS,亦可将以下样式放进您的主题CSS文件中。

details {
    padding: .6rem 1rem;
    border: 1px solid var(--info);
    background: var(--light);
    border-radius: 4px;
}

summary {
    font-weight: 700;
    cursor: pointer;
}

details[open] {
    padding-bottom: .75rem;
}

details[open] summary {
    margin-bottom: 6px;
}

details[open]>*:last-child {
    margin-bottom: 0;
}
最后于 2021-12-25 被Tillreetree编辑 ,原因:
上传的附件:
最新回复 (19)
全部楼主
  • oliolo 版主
    2021-7-17 2
    0
    我在想这个在什么场景下能用到呢?
  • Tillreetree 版主 楼主
    2021-7-17 3
    0
    oliolo 我在想这个在什么场景下能用到呢?
    某些内容导致篇幅太长的情况(如多图杀猫)
  • 1000
    2021-7-17 4
    0
    你就是我心中的那首忐忑,总是让我惊心动魄。 
  • loverf
    2021-7-17 5
    0
    请问,这个是文字多了自动折叠吗?还是得自己设置?
  • loverf
    2021-7-17 6
    0
    应用了,居然不起作用。
  • Tillreetree 版主 楼主
    2021-7-17 7
    0
    loverf 请问,这个是文字多了自动折叠吗?还是得自己设置?
    手动设置,和“登录可见插件”一个用法。
  • 4701929
    2021-7-21 8
    0
    哈哈,不错哦!
  • fybo
    2021-7-26 9
    0
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
  • BOSS
    2021-8-11 10
    0
    支持
返回