个人博客: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,实现多级目录,并且能够点击展开,隐藏下级目录~(不知道算不算深度优化~~~)的更多相关文章

  1. 「博客美化」I 页面的CSS

    要有自己的CSS十分重要 可以改别人写的CSS代码 也可以改博客园模板 我这里改的是SympleMomery 别忘了禁用模板 /*......去除广告..........*/ div[id^=&quo ...

  2. 在hexo静态博客中利用d3-cloud来展现标签云

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

  3. 如何在hexo博客中在线阅读pdf

    前言 有一些资料或者笔记是pdf版本的,如果想要放在博客中进行阅读,那么就得将其转换为markdown格式或者html格式.但是这样转换后,其原pdf的格式就会混乱了,排版将会变得很困难,不过一山更比 ...

  4. 【原】Github+Hexo+NextT搭建个人博客

    摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...

  5. 基于Hexo和Github搭建博客

    搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...

  6. 《Hexo+github搭建个人博客》

    <Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...

  7. Hexo搭建静态个人博客

    Hexo简介 之前在Github上托管的博客就是使用jekyll搭建的,官方的Github Pages同样推荐使用它.我之前体验了一下jekyll,没有达到我想要的效果.于是寻找替代方案,搜索同类博客 ...

  8. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  9. github+hexo搭建自己的博客网站(一)基础入门

    github提供的page,hexo提供的静态博客文档,这样可以搭建一个自己的一个博客网站. 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可 ...

随机推荐

  1. linux教程及常用命令手册

    Linux 教程 Linux 教程.Linux 简介.Linux 安装.Linux 系统启动过程.Linux 系统目录结构.Linux 忘记密码解决方法.Linux 远程登录.Linux 文件基本属性 ...

  2. Oracle 用户概念与基本操作

    目录 目录 Oracle的用户 通过系统用户来登陆SQLPlus system和sys的区别 查看登陆的用户 启用和锁定一个用户 启用用户 锁定用户 创建用户 修改用户 删除用户 角色权限 常用的用户 ...

  3. MySQL高级学习笔记(一):mysql简介、mysq linux版的安装(mysql 5.5)

    文章目录 MySQL简介 概述 mysql高手是怎样炼成的 mysq linux版的安装(mysql 5.5) 下载地址 拷贝&解压缩 检查工作 检查当前系统是否安装过mysql 检查/tmp ...

  4. ES6 基础内容介绍

    参考博客: https://www.cnblogs.com/libin-1/p/6716470.html 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性 ...

  5. 7.Jmeter 快速入门教程--录制复杂web测试脚本

    Jmeter的功能简单,不需要有脚本语言的编写经验,纯图形界面添加测试场景, 用起来上手很快.但是如果手动添加每一个web(http/https)请求,费时又费力.而且有可能最后手动编写的和实际发的请 ...

  6. 2059-authentication plugin 'caching_sha2_password"cnnot bt loaded :mysql8.0数据库连接不上(Navicat)

    原因:8.0改变了 身份验证插件 , 打开 my.ini (或者my.cofg) 可以看到变更了 5.7及其以前的方式:mysql_native_password 办法: 1:命令行键入数据库: my ...

  7. Linux NIO 系列(04-3) epoll

    目录 一.why epoll 1.1 select 模型的缺点 1.2 epoll 模型优点 二.epoll API 2.1 epoll_create 2.2 epoll_ctl 2.3 epoll_ ...

  8. python-模块-包

    一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...

  9. 9-vim-移动命令-04-利用标记返回之前小编辑的代码位置

    标记 在开发时,某一块代码可能需要处理,例如编辑或重看. 此时使用命令模式(普通模式)下使用m增加一个标记,这样可以在需要时快速地跳回来或者执行其他编辑操作.   标记名称可以是a~z或者A~Z之间的 ...

  10. ScrollView嵌套listview显示一行bug

    首先看看修复bug之后的显示对比图,结果一目了然 显示一行之前 修改bug之后 主要就是ScrollView嵌套listview显示计算  直接上代码   一目了然 <com.wechaotou ...