该目录可以显示在手机端和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插入到了文章里,我自个技术不够,希望有个抛砖引玉的效果,来个大佬把这玩意改到左边。
疯了吗?为了个文章目录去安装个WPJAM,它插件是为了迎合作者水煮鱼自己的博客主题打造的,用了两年数据库乱七八糟。
好像隐藏功能不可用,不知道咋回事
nb
这个功能,可以参考一下知乎那种写法,或者直接在右下角有个按钮显示。
👍有演示吗
http://www.trbaobao.top/137.html演示