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

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

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

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

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

/*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插入到了文章里,我自个技术不够,希望有个抛砖引玉的效果,来个大佬把这玩意改到左边。

给TA打赏
共{{data.count}}人
人已打赏
B2主题教程

B2Pro_3.3.56 + APP插件_1.0.9+uniapp源码_1.0.9(微信小程序)更新通知

2021-12-1 21:52:28

B2主题教程

元旦快乐!B2Pro_3.3.9 更新内容

2021-12-31 11:00:19

5 条回复 A文章作者 M管理员
  1. 海滨稻香

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

  2. 罗敷

    nb

  3. julian

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

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索