jq自动为文章生成锚点目录-Discuz教程下载

jq自动为文章生成锚点目录

开通本站Svip会员,全站资源免费下
有些网站管理系统是不带生成目录功能的,这个就比较有用,关键是非常简单。
Discuz的帖子倒是有生成目录功能,不过实在用不惯。

这个代码不限于某个网站管理系统,静态页面都能用。
20180806023508523.png
1.网页里先引入下,路径自己改。
<script type="text/javascript" src="../js/jquery.autoMenu.js"></script>
附件下载 jquery.autoMenu.js (2.41 KB, 下载次数: 125)
2.需要生成目录的页面,一般是内容页模板,添加
  1. <div class="autoMenu" id="autoMenu" data-autoMenu></div>
复制代码

3.目前只支持两级,发布文章的时候识别<h5></h5>为一级目录,<h6></h6>为二级目录。
附上CSS样式
  1. <style>
  2. .autoMenu{position: fixed;bottom: 10%;right: 5%;z-index: 1;text-align: left;}
  3. .autoMenu ul{line-height: 2;overflow-y: auto;background: #fff;-webkit-box-shadow:0 0 10px #CCC;-moz-box-shadow:0 0 10px #CCC;box-shadow:0 0 10px #CCC;}
  4. .autoMenu ul>li.sub{padding-left: 20px;}
  5. .autoMenu ul>li>a{color: #399c9c;}
  6. .autoMenu ul>li.active>a{color: #ff5370;}
  7. .btn-box{display: inline-block;width: 40px;height: 40px;text-decoration: none;position: relative;}
  8. .icon-plus-sign{display: inline-block;width: 26px;height: 26px;border-radius: 50%;border:4px solid #91ba61;background: #91ba61;position: absolute;top:3px;left:3px;}
  9. .icon-plus-sign:before,.icon-plus-sign:after{content: '';display: inline-block;width: 3px;height: 20px;background: #fff;border-radius: 1px;position: absolute;top:3px;left:11.5px;}
  10. .icon-plus-sign:after{-webkit-transform:rotate(90deg);}
  11. .icon-minus-sign{display: inline-block;width: 26px;height: 26px;border-radius: 50%;border:4px solid #ff5370;background: #ff5370;position: absolute;top:3px;left:3px;}
  12. .icon-minus-sign:before{content: '';display: inline-block;width: 20px;height: 3px;background: #fff;border-radius: 1px;position: absolute;left:3px;top:11.5px;}
  13. </style>
复制代码
这样就可以了。

以下是废话
--------------------------
我测试它用的是discuzX3.4,disucz的编辑器是不带h5、h6这种TAG.html" target="_blank" class="relatedlink">标签的,可以在后台  界面——编辑器设置——discuz!代码——添加一下。
微信截图_20200415220435.png
--------------------------------
默认是显示目录框,点击可隐藏。
如果要默认隐藏,点击显示,需要先给.autoMen
u ul加上display:none;
然后jq里改下:
  1. html += '</ul><a href="javascript:void(0);" class="btn-box">'
  2.                             +'<span class="icon-minus-sign"></span>'
  3.                         +'</a>';
  4.                 return html;
复制代码
改为
  1. html += '</ul><a href="javascript:void(0);" class="btn-box">'
  2. +'<span class="icon-plus-sign"></span>'
  3. +'</a>';
  4. return html;
复制代码
  1. bindEvent: function(){
  2.     var _this = this;
  3.     $(window).scroll(function(){
  4.         _this.setActive()
  5.     });
  6.     _this.$element.on('click','.btn-box',function(){
  7.         if($(this).find('span').hasClass('icon-minus-sign')){
  8.             $(this).find('span').removeClass('icon-minus-sign').addClass('icon-plus-sign');
  9.             _this.$element.find('ul').fadeOut();
  10.         }else{
  11.             $(this).find('span').removeClass('icon-plus-sign').addClass('icon-minus-sign');
  12.             _this.$element.find('ul').fadeIn();
  13.         }
  14.         
  15.     })
  16. }
复制代码
改为
  1. bindEvent: function(){
  2.     var _this = this;
  3.     $(window).scroll(function(){
  4.         _this.setActive()
  5.     });
  6.     _this.$element.on('click','.btn-box',function(){
  7.         if($(this).find('span').hasClass('icon-plus-sign')){
  8.             $(this).find('span').removeClass('icon-plus-sign').addClass('icon-minus-sign');
  9.             _this.$element.find('ul').fadeIn();
  10.         }else{
  11.             $(this).find('span').removeClass('icon-minus-sign').addClass('icon-plus-sign');
  12.             _this.$element.find('ul').fadeOut();
  13.         }
  14.         
  15.     })
  16. }
复制代码

end。

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部