hexo的next主题博客中加入分类页面的js,实现多级目录,并且能够点击展开,隐藏下级目录~(不知道算不算深度优化~~~)

个人博客:https://mmmmmm.me
源码:https://github.com/dataiyangu/dataiyangu.github.io

多级标题

在自己的xxxx.md文件中做如下修改:

categories:
  - 捣蛋鬼
  - mac

新建catogery_js.js(名字无所谓)

hexo的next主题博客中加入分类页面的js,实现多级目录,并且能够点击展开,隐藏下级目录~(不知道算不算深度优化~~~)_第1张图片

加入自己的js

我这里是下面这样的

function category_js () {
  $("
 > 
").prependTo(".category-list-item"); $(".category-list-child").css("display","none"); // .posts-expand .post-body ul li // $(".posts-expand .post-body ul li .category-list-link ").first().css("font-weight","bold"); $(".posts-expand .post-body ul .category-list-item ").first().children(".category-list-link").css("font-weight","bold"); $(".posts-expand .post-body ul .category-list-item ").first().siblings("li").children(".category-list-link").css("font-weight","bold"); // $(".category-list-child").css("list-style-type","none"); // $(".category-list-item").css("list-style-type","none"); $(".posts-expand .post-body ul li ").css("list-style-type", "none"); $(".category-list-link ").css("border-bottom", "none"); $(".display").click(function () { // $(this).siblings(".category-list-child").css("display")=="none"? // $(this).siblings(".category-list-child").css("display","block"):$(this).siblings(".category-list-child").css("display","none"); $(this).siblings(".category-list-child").slideToggle(); // $(this).siblings(".category-list-child").fadeToggle(); }) }

首先解释一下为什么没有 ( d o c u m e n t ) . r e a d y ( ) , 因 为 我 加 入 了 p j a x 局 部 刷 新 的 新 的 功 能 , 如 果 (document).ready(),因为我加入了pjax局部刷新的新的功能,如果 (document).ready()pjax(document).ready()的haul,局部刷新的时候就不能重新加载这个js片段了,也就失效了,具体的原因我会在下篇博文详细介绍。
另外上面的代码片段纯属博主自由发挥,我是写java的前端不是很好,w3c上一堆教程和辅助函数,大家按照自己的习惯随意调用就行,都能达到相应的效果。
喜欢的就点个星星吧~~~

你可能感兴趣的:(Personal,blogs)