怎么实现javascript实现树形菜单，
日期：2014-05-16 浏览次数：20370 次
如何实现javascript实现树形菜单，急！在线等。
二级树形菜单即可，当点击某个一级菜单时只有此级菜单的子菜单展开，其他一级菜单的子菜单都收起来。
------解决方案--------------------
<!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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function b1_onclick() {
if(b1.innerText== "+")
{
b1.innerText= "-";
list1.style.display= "block";
}
else
{
b1.innerText= "+";
list1.style.display = "none";
}
}
</script>
</head>
<body>
<span id=b1 onclick="return b1_onclick()" style="border-right: #ff00ff thin ridge; border-top: #ff00ff thin ridge; border-left: #ff00ff thin ridge; border-bottom: #ff00ff thin ridge; cursor: hand; background-color: #3399ff;">-</span>list1<br />
<ul id=list1>
<li>
item1<br /></li>
<li>item2<br /></li>
<li>item3</li>
</ul>
+list2
</body>
</html>
------解决方案--------------------
//³õʼ¸³ÖµÍ¼Æ¬
var openImg = new Image();
openImg.src = "images/open.jpg";
var closedImg = new Image();
closedImg.src = "images/close.jpg";
//ÏÔʾ×Ó½Úµã
function showBranch(branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' + branch);
}
//Õ¹¿ªÕÛµþº¯Êý£¨Í¼Æ¬±ä»¯£©
function swapFolder(img){
objImg = document.getElementById(img);
if (objImg.src.indexOf('images/close.jpg')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
//´´½¨Ê÷
function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
//Ìí¼Ó½Úµã
function addBranch(branch){
this.branches[this.branches.length] = branch;
}
//»³öÊ÷
function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i <numBranches;i++) treeString += this.branches[i].write();
document.write(treeString);
}
//¶¨ÒåÒ»¸ö½Úµã
function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
//Ìí¼ÓÒ¶×Ó½Úµã
function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}
//ÔÚÒ³Ãæд³ö½Úµã
function writeBranch(){
var branchString = '<span class="branch"';
branchString += '><img onclick="showBranch(\'' + this.id + '\')" src="images/close.jpg" id="I' + this.id + '"><span onclick="Drawline(\'w' + this.id+'\','+'\'green\')">' + this.text;
branchString += '<img src="images/w.jpg" id="w'+this.id + '"></span></span>';
branchString
二级树形菜单即可，当点击某个一级菜单时只有此级菜单的子菜单展开，其他一级菜单的子菜单都收起来。
------解决方案--------------------
<!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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function b1_onclick() {
if(b1.innerText== "+")
{
b1.innerText= "-";
list1.style.display= "block";
}
else
{
b1.innerText= "+";
list1.style.display = "none";
}
}
</script>
</head>
<body>
<span id=b1 onclick="return b1_onclick()" style="border-right: #ff00ff thin ridge; border-top: #ff00ff thin ridge; border-left: #ff00ff thin ridge; border-bottom: #ff00ff thin ridge; cursor: hand; background-color: #3399ff;">-</span>list1<br />
<ul id=list1>
<li>
item1<br /></li>
<li>item2<br /></li>
<li>item3</li>
</ul>
+list2
</body>
</html>
------解决方案--------------------
//³õʼ¸³ÖµÍ¼Æ¬
var openImg = new Image();
openImg.src = "images/open.jpg";
var closedImg = new Image();
closedImg.src = "images/close.jpg";
//ÏÔʾ×Ó½Úµã
function showBranch(branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' + branch);
}
//Õ¹¿ªÕÛµþº¯Êý£¨Í¼Æ¬±ä»¯£©
function swapFolder(img){
objImg = document.getElementById(img);
if (objImg.src.indexOf('images/close.jpg')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
//´´½¨Ê÷
function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
//Ìí¼Ó½Úµã
function addBranch(branch){
this.branches[this.branches.length] = branch;
}
//»³öÊ÷
function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i <numBranches;i++) treeString += this.branches[i].write();
document.write(treeString);
}
//¶¨ÒåÒ»¸ö½Úµã
function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
//Ìí¼ÓÒ¶×Ó½Úµã
function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}
//ÔÚÒ³Ãæд³ö½Úµã
function writeBranch(){
var branchString = '<span class="branch"';
branchString += '><img onclick="showBranch(\'' + this.id + '\')" src="images/close.jpg" id="I' + this.id + '"><span onclick="Drawline(\'w' + this.id+'\','+'\'green\')">' + this.text;
branchString += '<img src="images/w.jpg" id="w'+this.id + '"></span></span>';
branchString
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
