模板:折叠toc测试/文档

演示效果

三级子目录2

四级子目录1

将下面的css代码加入common.js中

/* 1. 基础容器重置：移除 MediaWiki 默认的各种边距干扰 */
.mw-parser-output #toc ul {
    list-style: none !important;
    margin: 0 !important;
    padding-left: 1.5em !important; /* 控制每一级目录向右缩进的距离 */
}

/* 第一层 ul 不需要缩进，可以设为 0 */
.mw-parser-output #toc > ul {
    padding-left: 5px !important;
}

/* 2. 每个列表项的设置 */
.mw-parser-output #toc li {
    position: relative !important; /* 关键：作为图标绝对定位的参考点 */
    padding-left: 20px !important; /* 为图标留出的固定宽度 */
    margin: 4px 0 !important;
    line-height: 1.5;
}

/* 3. 图标样式 */
.toc-toggle-btn {
    position: absolute !important;
    left: 0 !important;   /* 这里的 0 是相对于当前 li 的开头，实现了随层级缩进 */
    top: 0;
    width: 20px;       /* 与 li 的 padding-left 一致 */
    height: 1.5em;     /* 与行高一致 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #777;
    transition: transform 0.2s ease;
    user-select: none;
}

/* 4. 旋转动画 */
.toc-item-opened > .toc-toggle-btn {
    transform: rotate(90deg);
    color:green;
}

.toc-toggle-btn:hover {
    color: #333;
}

在common.js中加入

mw.loader.load("https://wiki.biligame.com/falconbms/index.php?title=MediaWiki:CollapibleToc.js&action=raw&ctype=text/javascript", "text/javascript");