任意节点的折叠最终完整版+展开和折叠图标的解决方法！

最新推荐文章于 2022-11-28 11:32:04 发布
最新推荐文章于 2022-11-28 11:32:04 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： javascript 文章标签： tree javascript function div class xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baitiandeye/article/details/5850911
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
var id=0,number=1;
function tree1(name, text, js, pos){
 var displayproperty = 'none';
 var nbsp = "";
 if (pos=='1') {
  id+=1;
  displayproperty='block';
 }
 var count = parseInt(pos);
 var tempname=id;
 for(var i = 0; i < count-1;i+=1){
  tempname += "_child";
  nbsp+='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 }
 document.write("<div class='myclass' style='display:"+displayproperty+"' myproperty='"+tempname+"' οnclick='abc(/""+tempname+"/")' >"+nbsp+text+"</div>");
}

function abc(name){
 var children = document.getElementsByTagName("div");
 
 /**
  * 判断如果事件源节点的没有直接子节点，那么就不用改变。
  */
 for ( var index = 0; index < children.length; index+=1) {
  var d = children[index];
  if (d==event.srcElement) {
   d = children[index+1];
   if (d.myproperty == name||d.myproperty.length < name.length) {
    return;
   }
  }
 }
 
 
 
 /**
  * 隐藏所有的等级低于事件源节点的所有节点，为后续的显示做准备。
  */
 for ( var index = 0; index < children.length; index+=1) {
  var d = children[index];
  var reg = new RegExp("_child$");
  if (d==event.srcElement) {
   number = children[index+1].style.display=='none'?1:0;
  }
  if (/^/d+$/.test(name)) {
   if (reg.test(d.myproperty)) {
    d.style.display = 'none';
   }
   continue;
  }
  reg = new RegExp("^"+name+"_child");
  if (reg.test(d.myproperty)) {
   d.style.display = 'none';
  }
  
 }

 

 
 
 var len = children.length;
 var flag = 0;
 var display = ['none','block'];
// number+=1;
// number%=2;
 for ( var index = 0; index+1 < len;) {
  var d = children[index];
  /**
   * 当循环到事件源节点的时候开始执行后面的操作
   */
  if (flag == 0 && d!=event.srcElement) {
   index+=1;
   d = children[index];
   
   
   continue;
  }else{
   if (d==event.srcElement) {
//    number = children[index+1].style.display=='none'?1:0;
   }
   d=children[index+=1];
   flag = 1;
  }
  /**
   * 事件的源节点和源节点后面紧跟的一个节点的myproperty一样，
   * 说明源节点没有子节点，不需要循环了
   */
  if (d.myproperty==name) {
   break;
  }
  /**
   * 判断源节点后面的这些节点是否是以name+"_child"开头的，
   * 主要是用来在"隐藏"（number=0）子节点的时候使用，
   * 这样会把该节点后面的所有子节点隐藏
   */
  var reg = new RegExp("^"+name+"_child");
  /**
   * 如果是要"显示"（number=0）后面的子节点，
   * 则只需显示该节点的直接子节点，
   * 而后面的兄弟节点以及子节点的子节点都不需要处理
   */
  if (number==1) {
   reg= new RegExp("^"+name+"_child"+"$");
  }
  /**
   * 如果是事件源节点的子节点，
   * 那么按照number来进行显示或者隐藏，
   * 否则的话：也就是说不是源节点的子节点的时候，
   * 如果现在正执行隐藏操作那就跳过后面的源节点的兄弟节点。
   */
  if (reg.test(d.myproperty)) {
   d.style.display = display[number];
  }else{
   if (number==0) {
    break;
   }
  }
 }
}

 

</script>


<body>
<script type="text/javascript">
       tree1('first',"第ss层",'javascript:void(0);','1');
  tree1('first',"第ss层",'javascript:void(0);','1');
  tree1('first',"第一层",'javascript:void(0);','1');
      tree1('first',"第1层",'#','2');
      tree1('first',"第2层",'#','2');
       tree1('first',"第21层",'#','3');
       tree1('first',"第22层",'#','3');
       tree1('first',"第23层",'#','3');
      tree1('first',"第3层",'#','2');
      tree1('first',"第4层",'#','2');
       tree1('first',"第41层",'#','3');
       tree1('first',"第42层",'#','3');
        tree1('first',"第421层",'#','4');
        tree1('first',"第422层",'#','4');
         tree1('first',"第4211层",'#','5');
         tree1('first',"第4212层",'#','5');
         tree1('first',"第4213层",'#','5');
          tree1('first',"第42131层",'#','6');
          tree1('first',"第42132层",'#','6');
          tree1('first',"第42133层",'#','6');
           tree1('first',"第421331层",'#','7');
           tree1('first',"第421332层",'#','7');
           tree1('first',"第421333层",'#','7');
          tree1('first',"第42134层",'#','6');
         tree1('first',"第4214层",'#','5');
         tree1('first',"第4215层",'#','5');
         tree1('first',"第4216层",'#','5');
        tree1('first',"第423层",'#','4');
       tree1('first',"第43层",'#','3');
      tree1('first',"第5层",'#','2');
       tree1('first',"第51层",'#','3');
       tree1('first',"第52层",'#','3');
       tree1('first',"第53层",'#','3');
 
 tree1('first',"第二层",'javascript:void(0);','1');
      tree1('first',"第1层",'#','2');
      tree1('first',"第2层",'#','2');
       tree1('first',"第21层",'#','3');
       tree1('first',"第22层",'#','3');
       tree1('first',"第23层",'#','3');
      tree1('first',"第3层",'#','2');
      tree1('first',"第4层",'#','2');
       tree1('first',"第41层",'#','3');
       tree1('first',"第42层",'#','3');
        tree1('first',"第421层",'#','4');
        tree1('first',"第422层",'#','4');
         tree1('first',"第4211层",'#','5');
         tree1('first',"第4212层",'#','5');
         tree1('first',"第4213层",'#','5');
          tree1('first',"第42131层",'#','6');
          tree1('first',"第42132层",'#','6');
          tree1('first',"第42133层",'#','6');
           tree1('first',"第421331层",'#','7');
           tree1('first',"第421332层",'#','7');
           tree1('first',"第421333层",'#','7');
          tree1('first',"第42134层",'#','6');
         tree1('first',"第4214层",'#','5');
         tree1('first',"第4215层",'#','5');
         tree1('first',"第4216层",'#','5');
        tree1('first',"第423层",'#','4');
       tree1('first',"第43层",'#','3');
      tree1('first',"第5层",'#','2');
       tree1('first',"第51层",'#','3');
       tree1('first',"第52层",'#','3');
       tree1('first',"第53层",'#','3');
    
    
    tree1('first',"第二层",'javascript:void(0);','1');
      tree1('first',"第1层",'#','2');
      tree1('first',"第2层",'#','2');
       tree1('first',"第21层",'#','3');
       tree1('first',"第22层",'#','3');
       tree1('first',"第23层",'#','3');
      tree1('first',"第3层",'#','2');
      tree1('first',"第4层",'#','2');
       tree1('first',"第41层",'#','3');
       tree1('first',"第42层",'#','3');
        tree1('first',"第421层",'#','4');
        tree1('first',"第422层",'#','4');
         tree1('first',"第4211层",'#','5');
         tree1('first',"第4212层",'#','5');
         tree1('first',"第4213层",'#','5');
          tree1('first',"第42131层",'#','6');
          tree1('first',"第42132层",'#','6');
          tree1('first',"第42133层",'#','6');
           tree1('first',"第421331层",'#','7');
           tree1('first',"第421332层",'#','7');
           tree1('first',"第421333层",'#','7');
          tree1('first',"第42134层",'#','6');
         tree1('first',"第4214层",'#','5');
         tree1('first',"第4215层",'#','5');
         tree1('first',"第4216层",'#','5');
        tree1('first',"第423层",'#','4');
       tree1('first',"第43层",'#','3');
      tree1('first',"第5层",'#','2');
       tree1('first',"第51层",'#','3');
       tree1('first',"第52层",'#','3');
       tree1('first',"第53层",'#','3');
     </script>
</body>
</html>

 

2.对每行加展开和折叠图标

function abc(name)
{
  var children = document.getElementsByTagName("div");
  
  var aa=event.srcElement;
  var h1 = parseInt(aa.myproperty)
  //一级父节点合并为样式cata1展开为cata4
  //二级节点合并为样式cata2展开为cata5
  //三级节点为样式cata3
  
  //第一步先处理事件源节点
  if(aa.className=="cata1")
  {
   aa.className="cata4"
  }
  else if(aa.className=="cata4")
  {
   aa.className="cata1"
  }
  else if(aa.className=="cata2")
  {
   aa.className="cata5"
  }
  else if(aa.className=="cata5")
  {
   aa.className="cata2"
  }
 
  
 
 /**
  * 隐藏所有的等级低于事件源节点的所有节点，为后续的显示做准备。
 
  */
 
 for ( var index = 0; index < children.length; index+=1) {
  
  var d = children[index];
  
  //第二步处理 非事件源层的其它所有节点
  var h1 = parseInt(d.myproperty);
  if(h1!=h)
  {
   if(d.className=="cata4")
   {
    d.className="cata1"
   }
   if(d.className=="cata5")
   {
    d.className="cata2"
   }
   
  }
  //第三步如果事件源为第一层父节点则把所有子节点全部合并
  if(h1==h)
  {
   if(/^/d+$/.test(aa.myproperty))
   {
    if(d.className=="cata5")
    {
     d.className="cata2"
    }
   }
   //第四步：处理兄弟节点
   else if(d!=aa&&d.myproperty==name)
   {
    if(d.className=="cata5")
    {
     d.className="cata2"
    }
   }
  }
  
 }

注意点：js调用class属性的时候要调用"className"因为class是保留字，另外一个就是如果div里包含超链接并且div和超链接里都有onclick函数，则两个函数都执行，如果让event.srcElement取得的是超链接onclick这个事件源。

baitiandeye
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jstree树形控件实现树形结构展示+自定义节点图标
Cmexico的专栏
12-25 1万+
因项目中用到树形展示数据功能，所以决定使用Jstree（jstree_pre1.0_fix_1）辅助前端展示，使用过程中，大部分参考官方doc和demo实现，由于需要自定义节点图片，起初着实纠结了很久，不过后来无意中看到网上一篇asp的帖子，构建方法，便摸索着修改了些源码，实现了自定义节点图标(下面会贴出相关代码).由于对此控件没有深入研究，所以有理解有误或者使用有误的地方，还请各位指教。 后台
JStree 绘制文件树（1）—— JsTree使用Demo以及自定义图标更换
代码小司机
05-17 2407
项目中需要向用户展示存储在云上的文件的目录结构，以便于用户选择下载使用，故使用JSTree进行数据的异步加载和绘制。最终的效果简图如下所示： 因初次使用JSTree进行异步数据加载和文件树图绘制，故记录该框架使用情况。 本次记录根据小块的功能划分多篇博客进行， 以便迅速定位到某些小的细节。 JSTree github 地址：https://github.c...
jsTree展开根节点 设置用户图标
weixin_30895603的博客
12-28 367
$("#jstree").on("loaded.jstree", function (event, data) { var n = 0; var root = data.instance.get_node(event.target.firstChild.firstChild.lastChild); var nodes = root.children_d; for (var ...
javascript入门 之 ztree（四 自定义Icon）
愿你饱经冷暖，仍保纯真
08-08 723
&lt;!DOCTYPE html&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; ZTREE DEMO - Standard Data &lt;/TITLE&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
jsTree如何自定义节点的icon
weixin_34257076的博客
12-20 590
最近在项目中使用了JStree来展示树形结构的数据,需求方提了一个小需求.要更换node的icon.翻看jstree的API,找了一会也没有找到.蛋疼...遂翻墙开始在stack overflow上找.终于还是找到了,有很多人提供了很多种的解决方案: 现在提供URL如下所示: http://stackoverflow.com/questions/7162272/how-to-change-icon...
修改JTree的图标
聆听梦飞扬的博客
10-09 2728
/** * 改变树的图标，图标的图片放到image文件夹当中 * @param tree */ public static void setChangeTreeUI(JTree tree){ tree.setRootVisible(false);//是否显示根节点 tree.setShowsRootHandles(tr
jstree使用【三】根据节点类型更换节点图标
热门推荐
一如既往
07-22 1万+
jstree
JSTree 自定义图标 不同节点 显示不同图标
wengyupeng 蜗牛一步一步向前。。。
08-28 9638
参见红色部分： arrays[i].iconSkin 是后台传的图标数据，分别是root A A1 A2 $("#jstree_demo") .jstree({ ...
tree自定义图标操作和长度显示
fred8的博客
11-28 319
tree自定义图标操作和长度显示。
Js操作树节点自动折叠展开的几种方法
10-25
主要介绍了Js操作树节点自动折叠展开的几种方法,需要的朋友可以参考下
jquery展开时不收缩其他的菜单
05-27
jquery实现 展开时不收缩其他的菜单
CSS层折叠(或收缩)与展开特效
05-22
CSS层折叠(或收缩)与展开特效CSS层折叠(或收缩)与展开特效CSS层折叠(或收缩)与展开特效CSS层折叠(或收缩)与展开特效
vue-列表下详情的展开与折叠案例
01-19
如下所示： 功能描述 1、默认折叠，点击时展示全部数据 2、点击A项，A展开，之后有两种情况：①再次点击A，A折叠；②点击其他项，如B，这时B展开，A折叠 解决方式 1、给展开折叠图标添加一个样式，显示成动画效果 .arrow{ position absolute width: 0.6rem; height: 0.3rem; top 2.0rem right 0.8rem background url(../../../assets/images/i
winform保持TreeView节点展开和折叠的状态
10-30
winform保持TreeView节点展开和折叠的状态 只需调用两个方法即可非常方面
jquery实现点击TreeView文本父节点展开/折叠子节点
10-27
今天客户提出要点击菜单（TreeView实现的）的父级节点时，展开节点,很多新手朋友可能对此会很陌生，接下来介绍解决方法，感兴趣的朋友可以了解下
一键折叠解决方案管理器节点
11-26
VS中常常遇到打开一个项目，解决方案管理器所有节点都展开了，当项目文件很多事，手动关闭很麻烦。VS自带了几个快捷键可以折叠。(数字键中的*:展开所有文件，-闭合，+展开)。 上传的该工具可以实现一键折叠的功能
三层节点嵌套折叠
baitiandeye的专栏
08-27 651
<br />多次嵌套div<br /> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="t
只有两层节点且每个父节点只有一个子节点的简单折叠方法
baitiandeye的专栏
09-15 610
无标题文档
el tree 节点折叠展开动态控制
最新发布
06-08
可以通过给每个节点绑定一个状态属性来实现节点的折叠和展开。例如，可以给每个节点添加一个 `collapsed` 属性，表示节点是否折叠。然后在节点的渲染函数中根据这个属性来决定节点的展示方式。 当用户点击节点时，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值