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'>  >  </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,实现多级目录,并且能够点击展开,隐藏下级目录~(不知道算不算深度优化~~~)的更多相关文章
- 「博客美化」I 页面的CSS
要有自己的CSS十分重要 可以改别人写的CSS代码 也可以改博客园模板 我这里改的是SympleMomery 别忘了禁用模板 /*......去除广告..........*/ div[id^=&quo ...
- 在hexo静态博客中利用d3-cloud来展现标签云
效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...
- 如何在hexo博客中在线阅读pdf
前言 有一些资料或者笔记是pdf版本的,如果想要放在博客中进行阅读,那么就得将其转换为markdown格式或者html格式.但是这样转换后,其原pdf的格式就会混乱了,排版将会变得很困难,不过一山更比 ...
- 【原】Github+Hexo+NextT搭建个人博客
摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...
- 基于Hexo和Github搭建博客
搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...
- 《Hexo+github搭建个人博客》
<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...
- Hexo搭建静态个人博客
Hexo简介 之前在Github上托管的博客就是使用jekyll搭建的,官方的Github Pages同样推荐使用它.我之前体验了一下jekyll,没有达到我想要的效果.于是寻找替代方案,搜索同类博客 ...
- 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程
前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...
- github+hexo搭建自己的博客网站(一)基础入门
github提供的page,hexo提供的静态博客文档,这样可以搭建一个自己的一个博客网站. 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可 ...
随机推荐
- linux教程及常用命令手册
Linux 教程 Linux 教程.Linux 简介.Linux 安装.Linux 系统启动过程.Linux 系统目录结构.Linux 忘记密码解决方法.Linux 远程登录.Linux 文件基本属性 ...
- Oracle 用户概念与基本操作
目录 目录 Oracle的用户 通过系统用户来登陆SQLPlus system和sys的区别 查看登陆的用户 启用和锁定一个用户 启用用户 锁定用户 创建用户 修改用户 删除用户 角色权限 常用的用户 ...
- MySQL高级学习笔记(一):mysql简介、mysq linux版的安装(mysql 5.5)
文章目录 MySQL简介 概述 mysql高手是怎样炼成的 mysq linux版的安装(mysql 5.5) 下载地址 拷贝&解压缩 检查工作 检查当前系统是否安装过mysql 检查/tmp ...
- ES6 基础内容介绍
参考博客: https://www.cnblogs.com/libin-1/p/6716470.html 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性 ...
- 7.Jmeter 快速入门教程--录制复杂web测试脚本
Jmeter的功能简单,不需要有脚本语言的编写经验,纯图形界面添加测试场景, 用起来上手很快.但是如果手动添加每一个web(http/https)请求,费时又费力.而且有可能最后手动编写的和实际发的请 ...
- 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 ...
- 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_ ...
- python-模块-包
一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...
- 9-vim-移动命令-04-利用标记返回之前小编辑的代码位置
标记 在开发时,某一块代码可能需要处理,例如编辑或重看. 此时使用命令模式(普通模式)下使用m增加一个标记,这样可以在需要时快速地跳回来或者执行其他编辑操作. 标记名称可以是a~z或者A~Z之间的 ...
- ScrollView嵌套listview显示一行bug
首先看看修复bug之后的显示对比图,结果一目了然 显示一行之前 修改bug之后 主要就是ScrollView嵌套listview显示计算 直接上代码 一目了然 <com.wechaotou ...