柒比贰(7B2)
柒比贰(7B2)

暂无菜单项

首页/文章/B2主题教程/
访问MD

B2添加一个简单的文章目录

『酷锐』会长君
发布于 2021/12/5更新于 2023/3/5
3,248

该目录可以显示在手机端和PC端。使用wpjam插件完成。
下面是方法:(自行下载安装wpjam插件)
先在扩展管理中将文章目录勾选

然后在文章目录中填入JS和CSS:(这里我将css修改了,加了滚动条并将宽度改为百分比,更好地适配手机端)

/*CSS*/
#toc {
    float: right;
    max-width: 40%;
    padding: 6px;
    margin: 0 0 20px 20px;
    border: 1px solid #EDF3DE;
    background: white;
    border-radius: 6px;
    overflow: auto;
    max-height: 200px;
}
#toc p {
	margin:0 4px;
}
#toc strong {
	border-bottom:1px solid #EDF3DE;
	display:block;
}
#toc span {
	display:block;
	margin:4px 0;
    cursor:pointer;
}
#toc ul{
	margin-bottom:0;
}
#toc li{
	margin:2px 0;
}
#toc small {
	float:right;
}
/**/
jQuery(document).ready(function(){
	jQuery('#toc span').on('click',function(){
	    if(jQuery('#toc span').html() == '[显示]'){
	        jQuery('#toc span').html('[隐藏]');
	    }else{
	        jQuery('#toc span').html('[显示]');
	    }
	    jQuery('#toc ul').toggle();
	    jQuery('#toc small').toggle();
	});
});

本来我是想将这个目录改到左边,并且跟随窗口移动的,但是wpjam这个插件是将div插入到了文章里,我自个技术不够,希望有个抛砖引玉的效果,来个大佬把这玩意改到左边。

0 点赞
0 收藏
分享
6 讨论
反馈
B2主题教程
订阅3
取消订阅
6 讨论
热门最新
总结
评论中主要分歧在于是否值得为文章目录安装WPJAM插件,有用户指出该插件会导致数据库混乱;同时有用户反馈隐藏功能不可用,并建议参考知乎或右下角按钮的显示方式。
West2

疯了吗?为了个文章目录去安装个WPJAM,它插件是为了迎合作者水煮鱼自己的博客主题打造的,用了两年数据库乱七八糟。

9/6
julian

好像隐藏功能不可用,不知道咋回事

9/9
罗敷

nb

7/18
海滨稻香

这个功能,可以参考一下知乎那种写法,或者直接在右下角有个按钮显示。

5/27
imz

?有演示吗

1/27
我相信
imz

http://www.trbaobao.top/137.html演示

11/21
0 / 600
细中粗
首页文档联系
柒比贰(7B2)
柒比贰(7B2)
首页购物导航播客视频文档下载
瓜奇中你最需要的是什么功能?
323 人投票单选
7月后结束
登录
连续打卡 0 天
2026年6月
我的通知
本周热帖
  • AI搜按钮有问题

    1
    6/3
  • 筛选标签展示有问题

    1
    6/3
  • 域名授权换绑能不能学习一下 子比主题

    2
    6/1
  • 前端提示这个是什么啊怎么解决 验证码的图片也无法正常显示

    2
    5/31
  • 发帖子是不是有问题啊,为期…

    1
    5/30
最新上架

Condor EDC Pouch 工具收纳包

春日力推

¥100-¥123
¥100-¥123

多规格演示:5.11 Tactical Rush 12 背包

满减

¥440-¥480
¥459-¥499

Olight i3T EOS 迷你手电筒

包邮

2600-5000
3000-5000

Nitecore NTK05 钛合金迷你钥匙刀

30天无理由退换

¥399
¥399
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于帮助文档FAQ协议
柒比贰(7B2) © 2026