JavaScript点击标题折叠文章内容
2015-09-01 15:37
681 查看
本文原地址http://aeroyoung.github.io/2015/09/01/Fold/
这是我的Github博客,里面有大量源代码欢迎查看
还是在写长博客的时候想到的需求,在文章中点击<h1><h2>等标签的时候自动折叠该标题下的所有子标题和正文。我想到了利用jQuery来实现,给所有标题写加上一个类“art-title”,再在js文件中添加点击事件。然后用nextUntil遍历后续同胞元素,当遇到同级或更高级别的标题时候遍历停止,期间所有元素都被隐藏/显示。
jQuery代码
需要引入bootstrap和font-awsome
同时要求在HTML文件中,标题下的内容(正文+子标题)都用一对<p></p>给包括起来,还得给所有标题写加上一个类“art-title”
这是我的Github博客,里面有大量源代码欢迎查看
还是在写长博客的时候想到的需求,在文章中点击<h1><h2>等标签的时候自动折叠该标题下的所有子标题和正文。我想到了利用jQuery来实现,给所有标题写加上一个类“art-title”,再在js文件中添加点击事件。然后用nextUntil遍历后续同胞元素,当遇到同级或更高级别的标题时候遍历停止,期间所有元素都被隐藏/显示。
jQuery代码
需要引入bootstrap和font-awsome
//点击文字h 折叠之后的文字 $(".art-title").click(function(){ //获得标签级别 var tagName=$(this).get(0).tagName; tagName=tagName.toLowerCase(); var level=tagName.substr(1,1); //遍历子元素 var brothers=$(this).nextUntil(tagName); brothers.each(function(index, element) { var brotagName=$(this).get(0).tagName; if(brotagName.substr(0,1)=="H"){//alert(brotagName); var brolevel=brotagName.substr(1,1); if(brolevel>=level) {$(this).toggle(1000);} else{return false;}//结束循环 }else{ $(this).toggle(1000); } }); if($(this).children("i").length>0) { $(this).children("i").remove(); }else{ $(this).prepend("<i class='fa fa-angle-double-down' style='font-style:normal'> </i>"); } });
同时要求在HTML文件中,标题下的内容(正文+子标题)都用一对<p></p>给包括起来,还得给所有标题写加上一个类“art-title”
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)