您的位置：首页 > Web前端 > JavaScript

js节点折叠简单代码！

2010-08-25 22:08 417 查看 
<!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>
<mce:script type="text/javascript"><!--
function change(f)
{
var oDiv=document.getElementById(f);
oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";

}
// --></mce:script>
</head>

<body>
<div style="color:#CC0000" mce_style="color:#CC0000" onclick="change('zhedie1')">歌星地区</div>
<div id="zhedie1"style="display:none" >
<ol>
<li>香港</li>
<li>内地</li>
<li>台湾</li>
</ol>
</div>
<!--超链接形式实现style="text-decoration:none"去掉下划线-->
<a href="javascript:change('zhedie2')" mce_href="javascript:change('zhedie2')" style="text-decoration:none" mce_style="text-decoration:none">电影</a>

<div id="zhedie2"style="display:none" >
<ol>
<li>喜剧</li>
<li>战争</li>
<li>爱情</li>
</ol>
</div>
</body>
</html>


第二种类型

<!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>
<mce:script type="text/javascript"><!--
function showContent(num)
{
for(var i=0;i<right.children.length;i++)
{
right.children(i).style.display="none";
}
right.children(num).style.display="";
}
// --></mce:script>
<body>

<div id="center">
<div id="left">
<ul>
<li><a href="#" mce_href="#" onclick="showContent(0)">链接一</a></li>
<li><a href="#" mce_href="#" onclick="showContent(1)">链接二</a></li>
<li><a href="#" mce_href="#" onclick="showContent(2)">链接三</a></li>
<li><a href="#" mce_href="#" onclick="showContent(3)">链接四</a></li>

</ul>
</div>
<div id="right" style="width:200;height:100;background-color:#abcdef">
<div class="a" style="display:none" mce_style="display:none">一的内容</div>
<div class="b" style="display:none" mce_style="display:none">二的内容</div>
<div class="c" style="display:none" mce_style="display:none">三的内容</div>
<div class="d" style="display:none" mce_style="display:none">四的内容</div>
</div>
</div>

</body>
</html>


第三种

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="qkhhcelb">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
function showmenu(n) {
if (eval("div"+n).style.display=="inline")
{
eval("div"+n).style.display="none";
}
else
{
hiddenall();
eval("div"+n).style.display="inline";
}

}
function hiddenall(){
for (i=1;i<4 ;i++ )
{
eval("div"+i).style.display="none";
}

}

</SCRIPT>
</HEAD>

<BODY>
<TABLE width="150" border="1">
<TR>
<TD><a href="#" mce_href="#" onclick="showmenu(1)">新闻管理</a><br><div id="div1" style="display:none" mce_style="display:none"><a href="#" mce_href="#">添加新闻</a><br>删除新闻<br>修改新闻</div></TD>
</TR>
<TR>
<TD><a href="#" mce_href="#" onclick="showmenu(2)">音乐管理</a><br><div id="div2" style="display:none" mce_style="display:none">添加音乐<br>删除音乐<br>修改音乐</div></TD>
</TR>
<TR>
<TD><a href="#" mce_href="#" onclick="showmenu(3)">其他管理</a><br><div id="div3" style="display:none" mce_style="display:none">添加其他<br>删除其他<br>修改其他</div></TD>
</TR>
</TABLE>
</BODY>
</HTML>


第四种自己写的但是在火狐可以，在ie不行

<!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>
<mce:script type="text/javascript"><!--
function tree(id, name, text, js) {
if (js == "javascript:void(0);") {
document.write("<div style='width:150px' name='" + name
+ "_parent'  onclick='change(/"" + name + "_parent/")'>" + text
+ "</div>/n");

} else {
document.write("<div style='display:none;width:150px' name='" + name
+ "_parent_child'>   <a href="" + js + "" mce_href="" + js + "">"
+ text + "</a></div>/n");
}
}

function change(name) {
var children = document.getElementsByName(name + "_child");
for ( var index = 0; index < children.length; index++) {
children[index].style.display = children[index].style.display == 'none' ? 'block'
: 'none';
}
}
// --></mce:script>
</head>

<body>
<mce:script type="text/javascript"><!--
tree('1','first',"第一层",'javascript:void(0);');
tree('2','first',"第1层",'#');
tree('2','first',"第2层",'#');
tree('2','first',"第3层",'#');
tree('2','first',"第4层",'#');
tree('2','first',"第5层",'#');
tree('2','first',"第6层",'#');
tree('1','s',"第222层",'javascript:void(0);');
tree('2','s',"第1层",'#');
tree('2','s',"第2层",'#');
tree('2','s',"第3层",'#');
tree('2','s',"第4层",'#');
tree('2','s',"第5层",'#');
tree('2','s',"第6层",'#');

// --></mce:script>
</body>
</html>


第五种自己写的ie正常显示

<!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>
<mce:script type="text/javascript"><!--
function tree(id, name, text, js) {
if (js == "javascript:void(0);") {
document.write("<div style='width:150px' id='" + id
+ "'  onclick='change(/"" + id + "/",/"" + name + "/")'>" + text
+ "</div>/n");

} else {
document.write("<div style='display:none;width:150px' id='" + id
+ "'>   <a href="" + js + "" mce_href="" + js + "">"
+ text + "</a></div>/n");

}
}

function change(id,name) {
var hr = parseInt(id);
for(i=0;i<hr;i++)
{
var children = document.getElementById(i+name);
children.style.display = children.style.display == 'none' ? 'block'
: 'none';
}

}
// --></mce:script>
</head>
<body>

<mce:script type="text/javascript"><!--
tree('6','first',"第一层",'javascript:void(0);');
tree('0first','first',"第1层",'#');
tree('1first','first',"第2层",'#');
tree('2first','first',"第3层",'#');
tree('3first','first',"第4层",'#');
tree('4first','first',"第5层",'#');
tree('5first','first',"第6层",'#');

tree('7','s',"第222层",'javascript:void(0);');
tree('0s','s',"第1层",'#');
tree('1s','s',"第2层",'#');
tree('2s','s',"第3层",'#');
tree('3s','s',"第4层",'#');
tree('4s','s',"第5层",'#');
tree('5s','s',"第6层",'#');
tree('6s','s',"第7层",'#');

// --></mce:script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航