我借用别人的Jquery做的一个树，现在需求变了，求大神指导下！很拙计啊。。。

2012-11-16 03:53:14 154 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

如何用jQuery做一个跑马灯，Marquee。本文介绍了如何利用jQuery创建跑马灯（Marquee）效果，包括文字或图片的滚动需求，以及滚动区域限制的处理。通过设置HTML结构，如浮动布局，然后使用jQuery控制ul元素的left属性实现滚动动画。代码示例和详细解释帮助理解实现过程，源码可在github获取。阅读详情

没学过JQuery,借用别人的一个树，现在需求是不管怎么样，每次只能打开一个子节点和一个父节点！求大神指导下，确实搞不懂了！

就如果图片展示的一样，每次就只可能有一个节点是打开着的！

...全文

用jQuery做一个简单的用户注册页面本文详细介绍了如何在用户登录界面使用HTML、CSS、JS和jQuery进行前端验证，包括检查输入字段是否为空、两次密码输入是否一致及验证码的实现。阅读详情

_o小怪兽o_

Web 开发 81,108 成员 341,721 内容

+ 关注 + 加入社区

切换为时间正序

_o小怪兽o_ 2012-11-16

打赏
举报

说白了就是用树建立一个二级菜单列表！但每次只能打开一个子菜单！

为啥呢 2012-11-16

打赏
举报

应该是节点的expand时遍历所有同级节点，对当前节点外的所有节点执行collapse就可以满足楼主要求了

_o小怪兽o_ 2012-11-16

打赏
举报

上面总共有四张图片，我贴上js代码


function Tree(rootNode) {
	var $ = this;
	this.root = rootNode;
	this.show = function(container) {
		$.update($.root);
		this.root.expand();
		if(container.tagName)
			container.appendChild($.root.container); 
		else if(typeof container == "string") 
			document.getElementById(container).appendChild($.root.container);
	}
	
	this.update = function(parent) {
		parent.indent();
		for (var i = 0; i < parent.children.length; i++) {
			parent.children[i].level = parent.level + 1;
			for (var j = 0; j < parent.ancestor.length; j++) {
				parent.children[i].ancestor.push(parent.ancestor[j]);
			}
			parent.children[i].ancestor.push(parent);
			$.update(parent.children[i]);
		}
	}
}


var currentNode = null;

function TreeNode(text, url, iconOpen, iconOpenHover, iconClosed, iconClosedHover) {
	var $ = this;
	this.level = 0;	
	this.children = [];	
	this.parent = null;	
	this.status = "CLOSED";	
	this.ancestor = [];	
	this.isHover = false;
	
	this.PATH = "images/tree/";
	this.COLLAPSED = this.PATH + "arrow_collapsed.gif";
	this.EXPANDED = this.PATH + "arrow_expanded.gif";
	this.COLLAPSED_HOVER = this.PATH + "arrow_collapsed_hover.gif";
	this.EXPANDED_HOVER = this.PATH + "arrow_expanded_hover.gif";
	this.CATEGORYOPEN = this.PATH + (iconOpen ? iconOpen : "folder_open.gif");
	this.CATEGORYOPEN_HOVER = this.CATEGORYOPEN;
	this.CATEGORYCLOSED = this.PATH + (iconClosed ? iconClosed : "folder_closed.gif");
	this.CATEGORYCLOSED_HOVER = this.CATEGORYCLOSED;
	this.EMPTY = this.PATH + "empty.gif";

	this.container = document.createElement("DIV");
	this.content = document.createElement("DIV");
	this.indentSpace = document.createElement("SPAN");
	this.statusIcon = document.createElement("IMG");
	this.node = document.createElement("SPAN");
	this.nodeIcon = document.createElement("IMG");
	this.label = document.createElement("A");
	this.container.appendChild(this.content);
	this.content.appendChild(this.indentSpace);
	this.content.appendChild(this.statusIcon);
	this.content.appendChild(this.node);
	this.node.appendChild(this.nodeIcon);
	this.node.appendChild(this.label);

	this.container.style.display = "block";
	this.statusIcon.src = this.COLLAPSED;
	this.nodeIcon.src = this.CATEGORYCLOSED;	
	this.nodeIcon.align = "absmiddle";
	this.statusIcon.align = "absmiddle";
	this.statusIcon.style.cursor = "default";
	this.node.style.cursor = "default";
	this.label.style.lineHeight = "20px";
	this.label.style.fontSize = "12px";
	this.label.style.display = "inline-block";
	this.label.style.backgroundImage = "url(" + this.BG + ")";
	this.label.style.backgroundRepeat = "repeat-x";
	this.label.innerHTML = text;
	
	if (url) {
	    this.label.href = url;
	    this.label.target = "mainFrame";
	}

	this.add = function(child) {
		this.container.appendChild(child.container);
		this.children.push(child);
		child.parent = this;
	}
	
	this.remove = function(child) {
		child.container.removeNode(true);
		var temp = [];
		for (var i = 0; i < this.children.length; i++) {
			if (this.children[i] != child) {
				temp.push(this.children[i]);
			} else {
				continue;
			}
		}
		this.children = temp;
	}

	this.hidden = function() {
		this.container.style.display = "none";
	}

	this.show = function() {
		this.container.style.display = "block";
	}

	this.getAncestor = function(level) {
		if (this.level == level)
			return this;
		for (var i = 0; i < $.ancestor.length; i++) {
			if ($.ancestor[i].level == level) {
				return $.ancestor[i];
			}
		}
		return null;
	}
	
	this.contains = function(node) {
		for (var i = 0; i < $.children.length; i++) {
			if ($.children[i] == node) {
				return true;
			}
			$.children[i].contains(node);
		}
		return false;
	}
	
	this.indent = function() {
		this.indentSpace.innerHTML = "";
		for (var i = 0; i < this.level; i++) {
			var indentImg = document.createElement("IMG");
			indentImg.src = this.EMPTY;
			indentImg.align = "absmiddle";
			this.indentSpace.appendChild(indentImg);
		}
		this.collapse();
	}
	
	this.setIcon = function() {
		this.nodeIcon = this.status == "CLOSED" ? 
		($.isHover ? $.CATEGORYCLOSED_HOVER : $.CATEGORYCLOSED) : 
		($.isHover ? $.CATEGORYOPEN_HOVER : $.CATEGORYOPEN);
	}
	
	this.collapse = function() {
		for (var i = 0; $.children && i < $.children.length; i++) {
			$.children[i].hidden();
		}
		$.statusIcon.src = $.COLLAPSED;
		$.nodeIcon.src = $.CATEGORYCLOSED;
		$.status = "CLOSED";
	}
	
	this.expand = function() {
		for (var i = 0; $.children && i < $.children.length; i++) {
			$.children[i].show();
		}
		$.statusIcon.src = $.EXPANDED;			
		$.nodeIcon.src = $.CATEGORYOPEN;
		$.status = "OPEN";
	}
	
	this.expandOrCollapse = function() {
		if ($.status == "CLOSED") {
			if (currentNode) {
				var ancestor = currentNode.getAncestor(1);
				var myAncestor = $.getAncestor(1);
				if (ancestor && myAncestor && ancestor != myAncestor) {
					ancestor.collapse();
				}
			}
			currentNode = $;
			$.expand();
		} else {
			$.collapse();
		}
	}

	this.node.onmousedown = function() {
		if (currentNode) {
			currentNode.nodeIcon.src = (currentNode.status == "CLOSED" ? currentNode.CATEGORYCLOSED : currentNode.CATEGORYOPEN);
		}
	}
	
	this.node.onmouseup = function() {
		if (event.button == 2) {
			
		}
	}
	
	this.content.onselectstart = function() {
		return false;	
	}

	this.statusIcon.onclick = this.expandOrCollapse;
	this.nodeIcon.ondblclick = this.expandOrCollapse;
	this.label.onclick = this.expandOrCollapse;
	
	this.statusIcon.onmouseover = function() {
		this.src = $.status == "CLOSED" ? $.COLLAPSED_HOVER : $.EXPANDED_HOVER;
	}
	
	this.statusIcon.onmouseout = function() {
		this.src = $.status == "CLOSED" ? $.COLLAPSED : $.EXPANDED;
	}
}

我借用别人的Jquery做的一个树，现在需求变了，求大神指导下！很拙计啊。。。

相关推荐