### [B2添加一个简单的文章目录](https://guaqi.com/article/54595)

**Published:** 2021-12-05T09:22:25

**Author:** 『酷锐』会长君

**Excerpt:** 该目录可以显示在手机端和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-radiu

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

![B2添加一个简单的文章目录](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

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

![B2添加一个简单的文章目录](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

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

**Tags:** B2教程

**Categories:** B2主题教程

**Comments:** 

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

**我相信:** [http://www.trbaobao.top/137.html演示](http://www.trbaobao.top/137.html演示)

**julian:** 好像隐藏功能不可用，不知道咋回事

**罗敷:** nb

**海滨稻香:** 这个功能，可以参考一下知乎那种写法，或者直接在右下角有个按钮显示。

**imz:** ?有演示吗



---