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

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

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(user_23.gif) 5px 10px no-repeat;}

#nav.dyn li.open{ background:url(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 < temparray.length; i++) {

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

}

return found;

break;

}

},

safariClickFix: function () {

return false;

}

}

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

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

weixin_39890332
关注
js树形导航菜单制作垂直js导航条特效
04-09
js树形导航菜单制作一个垂直纵向js导航条只设置导航二级菜单分类，点击显示隐藏二级菜单目录。内含js代码下载。
js实现导航菜单树形结构
我是小奶音啊的博客
02-04 1024
<!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 2947
多叉树结合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的树形导航的实现
旋转木马的IT小窝
03-30 3398
<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无限分级 树_用html+css+js实现一个无限级树形控件
weixin_39860349的博客
01-13 256
树形菜单示例ul>li{list-style: none;}/*可展开*/.switch-open{margin-left:-12px;border:6px solid transparent;display:inline-block;width:0px;height:0px;border-top-color: black;}/*展开完毕*/.switch-close{margin-left:-1...
js无限分级 树_js实现无限层级树形数据结构（创新算法）
weixin_32110907的博客
12-31 430
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-...
js无限分级 树_js递归算法实现无限级树形菜单
weixin_35757191的博客
12-23 857
js递归算法实现无限级树形菜单，并不是一个完整的插件，只是学习下用js递归算法实现无限级树形菜单，在学习php的时候网站后台要用到无限级栏目，于是就试着写无限级树形菜单，这里没有使用php写，使用js练习一下。栏目数据格式：通常网站栏目的数据表应该是这样子的，$address = array(array('id'=>1 , 'address'=>'安徽' , 'parent_id' ...
基于jquery实现无限级树形菜单
10-22
综上所述，本文通过实例详细介绍了利用jQuery实现无限级树形菜单的方法，对于Web前端开发者在页面导航菜单的实现方面提供了非常有价值的参考和解决方案。通过理解本文的内容，开发者可以学会如何构建一个动态的、...
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中利用各种循环进行遍历的方式总结
10-23
主要介绍了JavaScript中利用各种循环进行遍历的方式总结,是JS入门学习中的基础知识,需要的朋友可以参考下
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本...
js实现 无限层级 树形数据结构
weixin_52674469的博客
12-27 924
JS实现 无限层级 树形数据结构/
JS制作树形菜单
qq_62881798的博客
03-07 720
<!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 552
以前做网站，树形菜单一般都很简单，自己定义风格样式，简单的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 1387
我们有时候可能会遇到这样的情况，比如我们做前端项目时候用 vue+elementui 来写页面，用到了 `el-tree` 组件，该组件需要用到的数据结构是带有层级关系的数据，而后端返回给我们的是没有层级的数据，那么针对这种情况，我们就得对数据做进一步的处理，本文带你一点一点实现整个处理过程，并附带实际应用的组件例子
js小案例-楼层导航-树状菜单/前端
Canace_Xyxjjcaw的博客
10-10 413
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-scale=1.0"> <tit
XML在无限分级树应用的研究与实现
研究重点在于无限分级树的数据库设计，基于树的遍历和删除算法的实现，以及如何利用XML技术优化应用程序设计。通过商品分类图模型，使用SQLServer2005数据库和C#进行实现。" 在信息技术领域，无限分级树是一种常见...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值