js无限分级 树_js实现无限级树形导航列表效果代码

最新推荐文章于 2022-10-27 16:07:11 发布
最新推荐文章于 2022-10-27 16:07:11 发布
阅读量244 收藏 2
点赞数
文章标签： js无限分级 树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34073886/article/details/111891700
版权

本文实例讲述了js实现无限级树形导航列表效果代码。分享给大家供大家参考。具体如下：

这是一款js实现无限级树形下拉导航菜单，简洁实用，用到一个已封装好的JS类，有用的大家借鉴一下。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

*{ margin:0; padding:0; list-style:none;}

body { margin:20px;}

h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}

h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}

#nav a { text-decoration:underline;color:#06c; font-size:14px; line-height:24px;}

#nav ul{ margin-bottom:5px;}

#nav strong{ color:#696;}

#nav.dyn li ul{ display:none;}

#nav.dyn li ul.show{ display:block;}

#nav.dyn li{ padding-left:15px;}

#nav.dyn li.parent{ background:url(images/user_23.gif) 5px 10px no-repeat;}

#nav.dyn li.open{ background:url(images/user_23.gif) 5px -34px no-repeat;}

DOMhelp={

debugWindowId:'DOMhelpdebug',

init:function(){

if(!document.getElementById || !document.createTextNode){return;}

},

lastSibling:function(node){

var tempObj=node.parentNode.lastChild;

while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){

tempObj=tempObj.previousSibling;

}

return (tempObj.nodeType==1)?tempObj:false;

},

firstSibling:function(node){

var tempObj=node.parentNode.firstChild;

while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){

tempObj=tempObj.nextSibling;

}

return (tempObj.nodeType==1)?tempObj:false;

},

getText:function(node){

if(!node.hasChildNodes()){return false;}

var reg=/^\s+$/;

var tempObj=node.firstChild;

while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){

tempObj=tempObj.nextSibling;

}

return tempObj.nodeType==3?tempObj.nodeValue:false;

},

setText:function(node,txt){

if(!node.hasChildNodes()){return false;}

var reg=/^\s+$/;

var tempObj=node.firstChild;

while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){

tempObj=tempObj.nextSibling;

}

if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}

},

createLink:function(to,txt){

var tempObj=document.createElement('a');

tempObj.appendChild(document.createTextNode(txt));

tempObj.setAttribute('href',to);

return tempObj;

},

createTextElm:function(elm,txt){

var tempObj=document.createElement(elm);

tempObj.appendChild(document.createTextNode(txt));

return tempObj;

},

closestSibling:function(node,direction){

var tempObj;

if(direction==-1 && node.previousSibling!=null){

tempObj=node.previousSibling;

while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){

tempObj=tempObj.previousSibling;

}

}else if(direction==1 && node.nextSibling!=null){

tempObj=node.nextSibling;

while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){

tempObj=tempObj.nextSibling;

}

}

return tempObj.nodeType==1?tempObj:false;

},

initDebug:function(){

if(DOMhelp.debug){DOMhelp.stopDebug();}

DOMhelp.debug=document.createElement('div');

DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);

document.body.insertBefore(DOMhelp.debug,document.body.firstChild);

},

setDebug:function(bug){

if(!DOMhelp.debug){DOMhelp.initDebug();}

DOMhelp.debug.innerHTML+=bug+'\n';

},

stopDebug:function(){

if(DOMhelp.debug){

DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);

DOMhelp.debug=null;

}

},

getKey:function(e){

if(window.event){

var key = window.event.keyCode;

} else if(e){

var key=e.keyCode;

}

return key;

},

/* helper methods */

getTarget:function(e){

var target = window.event ? window.event.srcElement : e ? e.target : null;

if (!target){return false;}

while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){

target=target.parentNode;

}

return target;

},

stopBubble:function(e){

if(window.event && window.event.cancelBubble){

window.event.cancelBubble = true;

}

if (e && e.stopPropagation){

e.stopPropagation();

}

},

stopDefault:function(e){

if(window.event && window.event.returnValue){

window.event.returnValue = false;

}

if (e && e.preventDefault){

e.preventDefault();

}

},

cancelClick:function(e){

if (window.event){

window.event.cancelBubble = true;

window.event.returnValue = false;

}

if (e && e.stopPropagation && e.preventDefault){

e.stopPropagation();

e.preventDefault();

}

},

addEvent: function(elm, evType, fn, useCapture){

if (elm.addEventListener){

elm.addEventListener(evType, fn, useCapture);

return true;

} else if (elm.attachEvent) {

var r = elm.attachEvent('on' + evType, fn);

return r;

} else {

elm['on' + evType] = fn;

}

},

cssjs:function(a,o,c1,c2){

switch (a){

case 'swap':

o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);

break;

case 'add':

if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}

break;

case 'remove':

var rep=o.className.match(' '+c1)?' '+c1:c1;

o.className=o.className.replace(rep,'');

break;

case 'check':

var found=false;

var temparray=o.className.split(' ');

for(var i=0;i

if(temparray[i]==c1){found=true;}

}

return found;

break;

}

},

safariClickFix:function(){

return false;

}

}

DOMhelp.addEvent(window, 'load', DOMhelp.init, false);

js实现无限级树形导航列表

希望本文所述对大家的JavaScript程序设计有所帮助。

CPA研习社
关注
js树形导航菜单制作垂直js导航条特效
04-09
js树形导航菜单制作一个垂直纵向js导航条只设置导航二级菜单分类，点击显示隐藏二级菜单目录。内含js代码下载。
js无限分级 树_js实现无限级树形导航列表
weixin_39890332的博客
12-23 175
js实现的无限级树形下拉导航列表 *{ margin:0; padding:0; list-style:none;}body { margin:20px;}h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}h5 { font-size:12px; text-align:center; fon...
js实现导航菜单树形结构
我是小奶音啊的博客
02-04 1030
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）
zxingchao2009的专栏------用博客记录技术成长的点点滴滴
03-29 2950
多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法） 一、问题研究的背景和意义 在Web应用程序开发领域，基于AJAX技术的JavaScript树形控件已经被广泛使用，它用来在Html页面上展现具有层次结构的数据项。目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件，例如Jquery、Dojo、Yaho
JavaScript树型导航菜单
Where_the_way的专栏
01-11 877
树型导航菜单一般项目中经常会用到，之前写过一个，现在抽空改了一下。 下面是使用文档   类名：Tree 方法： 名称 返回值 描述 Tree(datasource:array) Void 构造函数， 以数据填充 Render(placeholder: string) Void
js无限分级 树_js递归算法实现无限级树形菜单
weixin_35757191的博客
12-23 860
js递归算法实现无限级树形菜单，并不是一个完整的插件，只是学习下用js递归算法实现无限级树形菜单，在学习php的时候网站后台要用到无限级栏目，于是就试着写无限级树形菜单，这里没有使用php写，使用js练习一下。栏目数据格式：通常网站栏目的数据表应该是这样子的，$address = array(array('id'=>1 , 'address'=>'安徽' , 'parent_id' ...
js无限分级 树_js实现无限层级树形数据结构（创新算法）
weixin_32110907的博客
12-31 436
js实现无限层级树形数据结构(创新算法)原始数据let dataSource = [{id:1,pid:0,name:'一级菜单A'},{id:2,pid:0,name:'一级菜单B'},{id:3,pid:0,name:'一级菜单C'},{id:4,pid:1,name:'二级菜单A-A'},{id:5,pid:1,name:'二级菜单A-B'},{id:6,pid:2,name:'二级菜单B-...
基于jquery实现无限级树形菜单
10-22
综上所述，本文通过实例详细介绍了利用jQuery实现无限级树形菜单的方法，对于Web前端开发者在页面导航菜单的实现方面提供了非常有价值的参考和解决方案。通过理解本文的内容，开发者可以学会如何构建一个动态的、...
jstree创建无限分级树的方法【基于ajax动态创建子节点】
10-21
jstree是一款强大的JavaScript库，专门用于创建交互式的树形视图。在本文中，我们将深入探讨如何使用jstree创建无限分级的树结构，并通过ajax动态加载子节点，同时结合asp.net后台来实现这一功能。 首先，我们需要...
js javascript 无限级菜单
07-05
在JavaScript和jQuery的世界里，构建无限级菜单是一项常见的任务，特别是在网页设计中，它能够提供一个清晰、层次分明的导航结构。本教程将深入探讨如何使用JavaScript和jQuery创建一个兼容主流浏览器，包括...
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
10-23
主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
原生JS树菜菜单(无限级、兼容各浏览器)
01-09
原生JS写的无限级树形菜单(otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。 可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） 更多功能参见demo.html和demo1.html
基于JavaScript实现树形下拉框
11-23
平时会经常遇到树形结构的问题，比如显示目录结构等。 大多数情况下后台会返回这样的数据，如下： [ { id: 19, pid: 0, name: 'nodejs' }, { id: 20, pid: 19, name: 'express' }, { id: 21, pid: 19, name: 'mongodb' }, { id: 60, pid: 20, name: 'ejs' }, { id: 59, pid: 0, name: '前端开发' }, { id: 70, pid: 59, name: 'javascript' }, { id: 71, pid: 59, name: 'cs
JavaScript中利用各种循环进行遍历的方式总结
10-23
主要介绍了JavaScript中利用各种循环进行遍历的方式总结,是JS入门学习中的基础知识,需要的朋友可以参考下
基于JS的树形导航的实现
旋转木马的IT小窝
03-30 3399
<br />网上找了个JS的树形导航，先要下载那个js包，然后放在项目中，才可以使用，做了一个小例子，留着备用。<br /> <br />页面文件要放在那个js包共同的上级文件夹中，否则会找不到图片。<br /> <br />示例代码：<br />前台：<br /><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="showTree.aspx.cs" Inherits="WebApplication_study.Tree.showTree" %
js实现 无限层级 树形数据结构
weixin_52674469的博客
12-27 929
JS实现 无限层级 树形数据结构/
JS制作树形菜单
qq_62881798的博客
03-07 723
<!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=g.
js无限级树菜单
liudanyang_21的博客
07-06 559
以前做网站，树形菜单一般都很简单，自己定义风格样式，简单的js控制，后来原来网上很多文章都在讨论Js树型菜单，看了几个实例，发现这个树比较简单好用。http://hovertree.com/texiao/js/9.htm这个无限级可刷新Js树型菜单 menuTree1、可设置无限级菜单2、不必使用框架3、可刷新，多页面内跳转不会影响菜单4、可限级创造子树5、支持目前主流浏览器：IE5，6，7，8，9，10，11，酷睿，火狐等6、节点图片可设置切换图片效果点击这里下载http://hovertr...
javascript 将数据列表处理成树形有层级关系的列表方法（思路+代码）
最新发布
编程世界
10-27 1394
我们有时候可能会遇到这样的情况，比如我们做前端项目时候用 vue+elementui 来写页面，用到了 `el-tree` 组件，该组件需要用到的数据结构是带有层级关系的数据，而后端返回给我们的是没有层级的数据，那么针对这种情况，我们就得对数据做进一步的处理，本文带你一点一点实现整个处理过程，并附带实际应用的组件例子
XML在无限分级树应用的研究与实现
"基于xml的无限分级树的应用研究，王盛，河海大学电气工程学院，南京（210098），文章探讨了在Web开发和应用程序开发中使用无限分级树的优势，特别是其可复用性。研究重点在于无限分级树的数据库设计，基于树的遍历...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值