jquery实现文件树目录、折叠目录树代码（兼容IE6,IE7）

最新推荐文章于 2022-09-27 21:22:34 发布
最新推荐文章于 2022-09-27 21:22:34 发布
阅读量8.5k 收藏 1
点赞数 1
分类专栏： js 文章标签： 树形 js 结构 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h348592532/article/details/16959569
版权

例子简单，个人爱好，如有不足，可以共同探讨


IE7效果大概如下：如果你有足够的数据可以无限迭代下去


foder.html代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>文件树结构展示测试</title>

<link href="css/foder.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

/* 原理：默认设置他的子树也就是子菜单都是隐藏的，当点击父节点，就会显示他的所有子节点也就是子树 */


$(function() {

$(".fla").click(

function() {

/* 判断子菜单是否是隐藏的 */

if ($(this).next().css("display") == "none") {

/*如果是隐藏 更换背景图片，由可打开图片变成可关闭图片 */

$(this).children(".open").removeClass("open").addClass(

"close");

$(this).children(".pack").removeClass("pack").addClass(

"packC");

/* 显示隐藏子树 */

$(this).next().removeClass("none");

} else {

/* 否则更换背景图片，由可关闭图片变成可打开图片 */

$(this).children(".close").removeClass("close")

.addClass("open");

$(this).children(".packC").removeClass("packC")

.addClass("pack");

/* 隐藏正在显示子树 */

$(this).next().addClass("none");

}

});

});

</script>

</head>

<!-- 每一个ul都可以看做一个子树 -->

<div class="foder">

<ul class="ful">

<li>

<div class="fla">

<span class="open btn" id="id1"></span> <span class="pack btn"

id="id2"></span> <span class="ftext">语文</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="open btn"></span> <span class="pack btn"></span> <span

class="ftext">第一章</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第一节</span>

</div></li>

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第二节</span>

</div></li>

<li>

<div>

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第三节</span>

</div></li>

</ul>

</li>

<li>

<div class="fla">

<span class="open btn"></span> <span class="pack btn"></span> <span

class="ftext">第二章</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第一节</span>

</div></li>

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第二节</span>

</div></li>

<li>

<div>

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第三节</span>

</div></li>

</ul></li>

<li>

<div class="fla">

<span class="open btn"></span> <span class="pack btn"></span> <span

class="ftext">第三章</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第一节</span>

</div></li>

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第二节</span>

</div></li>

<li>

<div>

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第三节</span>

</div></li>

</ul></li>

</ul></li>

<li>

<div class="fla">

<span class="open btn" id="id1"></span> <span class="pack btn"

id="id2"></span> <span class="ftext">数学</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="open btn"></span> <span class="pack btn"></span> <span

class="ftext">第一章</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第一节</span>

</div></li>

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第二节</span>

</div></li>

<li>

<div>

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第三节</span>

</div></li>

</ul>

</li>

<li>

<div class="fla">

<span class="open btn"></span> <span class="pack btn"></span> <span

class="ftext">第二章</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第一节</span>

</div></li>

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第二节</span>

</div></li>

<li>

<div>

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第三节</span>

</div></li>

</ul></li>

<li>

<div class="fla">

<span class="open btn"></span> <span class="pack btn"></span> <span

class="ftext">第三章</span>

</div>

<ul class="ful none" id="id3">

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第一节</span>

</div></li>

<li>

<div class="fla">

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第二节</span>

</div></li>

<li>

<div>

<span class="close btn"></span> <span class="pack btn"></span> <span

class="ftext">第三节</span>

</div></li>

</ul></li>

</ul></li>

</ul>

</div>

<body>

</body>

</html>



---------------------------------------------------------------------------------------------------------------------------------

css代码如下

 

/* CSS Document */

 

.foder{

width:200px;

height:400px;

margin:0 auto;

border: thin solid #000000;

/*兼容IE6IE7的关键点大家注意，我走了不少弯路*/

position:relative;

top:0;

left:0;

overflow:auto;

}

.pack {

background-position: 0px -204px;

}

.packC {

background-position: 0px -226px;

}

.open{

background-position: -43px -179px;

}

.close{

background-position: -43px -201px;

}

.btn{

    width:22px;

    height:20px;

    display:block;

background-image: url(../images/btn_icon.gif);

float:left;

}

.none{

display:none;

}

.block{

display:block;

}

 

.ful{

list-style-type: none;

padding-left:22px;

margin-left:0px;

 

}

.ful li{

position:relative;

font-size:12px;

line-height:20px;

}

.ftext{

margin-left:5px;

}

.fcont {

font-family: "宋体";

margin-left:10px;

}


 ---------------------------------------------------------------------------------------------------------------------------------------

效果如下：


例子源码下载地址：http://pan.baidu.com/s/1EcqJO(复制链接打开就可下载，下载后就可以马上运行)

如有建议，欢迎评论指导


送人玫瑰手留余香
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html漂亮的树形目录
10-31
html漂亮的树形目录，简洁漂亮，非常实用
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
12-10
本屌丝最近工作要求重写网站所有代码，so…极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放，无码无真相！ 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.0 *******************************/ ;(function($){ $.fn.l
jquery php实现目录树,jquery 树形结构实现代码详解
weixin_33958381的博客
03-22 268
由于工作需要，要求实现在table中的某一列有树的结构和效果，不得已使用jquery，第一次用，寸步难行一段程序憋三天，终于凑合着实现了功能要求如下：点击+号，下面的子节点展开，只展开当前节点的下一级节点，二级及以下节点仍隐藏点击-号，下面的所有子节点隐藏点击 1 2 3 4 会相应的展开到第一级节点，展开到第三级，展开到第四级。我的思路是：使用最原始的拼接html ，获取数据源以后，给tr赋值自...
Jquery实现列表目录效果
weixin_67107650的博客
05-18 976
这次来分享一个用jquery实现的一个类似于简单图文介绍的列表目录。 先设置一个开头标题heml代码，再添加一下它的css样式。 2.记住，写完上面的代码到js框架这个地方我们需要用到jquery插件，所以一定要先引入，否则后面打代码打着打着就忘记了。 3.这里我们创造一个方法，这个方法里面我们把一个列表的图片，标题和序号还有简介都封装在里面。（这里你想封装多少个都可以，我里面是封装了十一个的） 4.然后把那个方法名在下面这里，写一个for函数循环创造，在函数里面写一.
jquery 树型(Tree)目录(一)
方逸涛的专栏
08-17 1142
第一步：从数据库中取得数据，并封装为map集合，如下代码： @Controller @Results(value={@Result(name = "success", type = "chain", location = "channel"),
javascript弹出层制作
weixin_34366546的博客
12-26 70
<?php header("Content-type:text/html;charset=utf-8;"); ?> <body> <a href="javascript:void(shoplist({LID:321}));">显示</a> <script type="text/javascript" src="./...
Python全栈工程师（34：jQuery）
女王の专属领地
05-14 321
Python全栈工程师（34：jQuery）
span相关
yufengguanyun的博客
07-17 216
span做成按钮时，文字不被选中样式
用Jquery实现无限目录树形结构,实现的几种方式?
weixin_46409887的博客
04-20 1291
1.静态写法:(固定的几个目录可以用这种方法实现); 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
制作一个简单的弹出窗
m0_56933148的博客
09-27 573
一个简单的弹出制作分享
jquery树状目录
08-20
jquery树状目录。基于jQuery开的一套树状结构组件，直接使用参数调用即可显示相关效果。
jquery实现兼容IE8的异步上传文件
12-11
案例： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> [removed][removed] [removed][removed] [removed] functi
jQuery多级目录树型结构菜单代码.zip
07-11
<link rel="stylesheet" type="text/css" href="css/default.css?3.1.64"> <link rel="stylesheet" type="text/css" href="css/Aimara.css?3.1.64"> <link rel="stylesheet" type="text/css" href="css/Example.css?3.1.64"> [removed][removed] [removed] window.onload = function() { //Initializing Tree //Tree Context Menu Structure var contex_menu = { 'context1' : { elements : [ { text : 'Node Actions', icon: 'images/blue_key.png', action : function(node) { }, submenu: { elements : [ { text : 'Toggle Node', icon: 'images/leaf.png', action : function(node) { node.toggleNode(); } }, { text : 'Expand Node', icon: 'images/leaf.png', action : function(node) { node.expandNode(); } 这是一款带日志多级目录树型结构菜单js代码，可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都可以配置不同的图标。
jQuery zTree插件快速实现目录树
12-08
ztree是JQuery的一个开源树形目录的插件，用来快速构建网站的树形目录结构，并且提供了功能丰富，利于扩展的API。 JQuery ztree官网 只要引入jquery和ztree的库js，然后给ztree提供需要的json数据，并且设置好ztress的属性，就可以即刻展示出树形目录。 总结下来，要使用ztree的话，必须要完成以下几步： 1. 引入库文件 jquery.js ztree.js ztree.css 2. 获取数据 你要思考数据来源问题了。 如果要自己从数据库查询树形结构这时候你需要知道oracle的递归查询connect by：oracle中使用start with…con
jstree-实用的jQuery目录树插件
04-27
jstree-实用的jQuery目录树插件
jquery树形展示服务端目录结构树组件
07-24
jquery插件,展示服务器的目录树结构哦
jquery实现的树形目录实例
10-24
主要介绍了jquery实现的树形目录,涉及jquery针对页面元素及鼠标事件的相关操作技巧,需要的朋友可以参考下
jQuery实现可兼容IE6的滚动监听功能
12-04
本文实例讲述了jQuery实现可兼容IE6的滚动监听功能。分享给大家供大家参考，具体如下： 其实这东西本打算用原生的javascript来写，但是原生的javascript取class与监听滚动条的滚动过于麻烦，因此上了jQuery，没关系...
jQuery ajax 目录树
最新发布
09-14
jQuery ajax 目录树是一个采用jQuery和ajax技术实现的可以展示目录树的功能。该功能可以实现对目录树的增加、删除、修改和查询操作。通过使用ajax技术，可以实现目录树的异步加载，不限级别。可以参考开源代码，但需要自己实现。 这个目录树可以用于各种工作项目、毕业设计、课程设计等场景。项目源码经过助教老师测试，运行无误，欢迎下载。 使用jQuery ajax 目录树的好处是可以实现动态加载数据的技巧，可以根据需要异步获取目录树的数据，并且支持无限级分类。通过这个功能，可以实现一个树形菜单的效果。 具体实现的步骤如下： 1. 引入jQuery库和必要的样式文件。 2. 创建一个HTML元素作为容器来展示目录树。 3. 使用ajax技术获取目录树的数据，并将数据传递给后台进行处理。 4. 后台根据传递的数据进行相应的操作，比如增加、删除、修改和查询等。 5. 后台将处理结果返回给前端，前端根据返回的数据进行相应的展示和处理。 6. 可以根据需要添加其他功能，比如搜索功能、拖拽排序等。 通过以上步骤，就可以实现一个基于jQuery和ajax的目录树功能。可以根据需要自定义样式和功能，使目录树满足项目的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值