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

个人博客：https://mmmmmm.me

源码：https://github.com/dataiyangu/dataiyangu.github.io

多级标题

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

categories:
  - 捣蛋鬼
  - mac

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

加入自己的js

我这里是下面这样的

function category_js () {
  $("<div class='display' style='float: left'> &nbsp>&nbsp </div>").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();

  })
}

首先解释一下为什么没有(document).ready()，因为我加入了pjax局部刷新的新的功能，如果(document).ready()，因为我加入了pjax局部刷新的新的功能，如果(document).ready()，因为我加入了pjax局部刷新的新的功能，如果(document).ready()的haul，局部刷新的时候就不能重新加载这个js片段了，也就失效了，具体的原因我会在下篇博文详细介绍。

另外上面的代码片段纯属博主自由发挥，我是写java的前端不是很好，w3c上一堆教程和辅助函数，大家按照自己的习惯随意调用就行，都能达到相应的效果。

喜欢的就点个星星吧~~~

巴特西

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

多级标题

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

加入自己的js

最新文章

热门文章