如何将无限级树形菜单设置为默认展开

tomorrow_jie 2010-09-16 12:24:46
以下是CSS代码
<style type="text/css">
a {text-decoration:none;}
a,a:visited {color:#000;background:inherit;}
body {margin:0 0 0 233px;padding:20px;font:12px tahoma,宋体,sans-serif;}
dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}
dd {margin:0 0 0 15px;}
h4 {margin:0 233px 0 0;padding:0;font-size:18px;text-align:center;}
p {margin:0;padding:0 0 0 18px;}
p a,p a:visited {color:#00f;background:inherit;}
/*CNLTreeMenu Start*/
.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}
.CNLTreeMenu ul {padding:0;}
.CNLTreeMenu li {list-style:none;padding:0;}
.Closed ul {display:none;}
.Child img.s {background:none;cursor:default;}
#CNLTreeMenu1 ul {margin:0 0 0 17px;}
#CNLTreeMenu1 img.s {width:20px;height:15px;}
#CNLTreeMenu1 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}
#CNLTreeMenu2 ul {margin:0 0 0 17px;}
#CNLTreeMenu2 img.s {width:20px;height:15px;}
#CNLTreeMenu2 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}
#CNLTreeMenu2 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}
#CNLTreeMenu2 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}
#CNLTreeMenu3 ul {margin:0 0 0 17px;}
#CNLTreeMenu3 img.s {width:20px;height:15px;}
#CNLTreeMenu3 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}
#CNLTreeMenu3 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}
#CNLTreeMenu3 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}
/*CNLTreeMenu End*/
/*Temp CSS for View Demo*/
#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {padding-bottom:15px;}
.ViewCode {
clear:both;
border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;
}
.ViewCode h6 {color:#00f;}
</style>
以下是JavaScript代码
<script type="text/javascript">
function Ob(o){
var o=document.getElementById(o)?document.getElementById(o):o;
return o;
}
function Hd(o) {
Ob(o).style.display="none";
}
function Sw(o) {
Ob(o).style.display="";
}
function ExCls(o,a,b,n){
var o=Ob(o);
for(i=0;i<n;i++) {o=o.parentNode;}
o.className=o.className==a?b:a;
}
var b=1;
function CNLTreeMenu(id,TagName0) {
this.id=id;
this.TagName0=TagName0==""?"li":TagName0;
this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {
this.ClassName0=ClassName0;
this.ClassName1=ClassName1;
this.ClassName2=ClassName2;
this.ImgUrl=ImgUrl || "tree/s.gif";
this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";
for (i=0;i<this.AllNodes.length;i++ ) {
this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;
}
}
this.SetNodes = function (n) {
var sClsName=n==0?this.ClassName0:this.ClassName1;
for (i=0;i<this.AllNodes.length;i++ ) {
this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
}
}
}
var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");
MyCNLTreeMenu1.InitCss("Opened","Closed","Child","tree/s.gif");
var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");
MyCNLTreeMenu2.InitCss("Opened","Closed","Child","tree/s.gif");
var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");
MyCNLTreeMenu3.InitCss("Opened","Closed","Child","tree/s.gif");
</script>
现在状态是打开网页，默认是折叠的，我想请问下如何修改代码使网页打开时树形菜单是展开的，可以手动折叠。请懂的同志不吝赐教，谢谢各位！
...全文
506 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
籽沫 2010-09-17
  • 打赏
  • 举报
 回复
这样就好了，没事的呢 不客气

是我开始没看清楚你的 代码，我不知道它的子栏目也是可以折叠展开的，所以在那个for循环里面需要将第一次页面加载的时候this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:""; 空的class给它赋值的class注释掉就好了，在开始的时候不要给他赋值class进行隐藏就OK了，然后在将展开收缩的默认条件变下就OK了



<html>

<head>

<title>行为分析策略配置</title>

<meta lang="java" http-equiv="content-Type" content="text/html;charset=utf-8">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

a {text-decoration:none;}

a,a:visited {color:#000;background:inherit;}

body {margin:0 0 0 233px;padding:20px;font:12px tahoma,宋体,sans-serif;}

dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}

dd {margin:0 0 0 15px;}

h4 {margin:0 233px 0 0;padding:0;font-size:18px;text-align:center;}

p {margin:0;padding:0 0 0 18px;}

p a,p a:visited {color:#00f;background:inherit;}

/*CNLTreeMenu Start*/

.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}

.CNLTreeMenu ul {padding:0;}

.CNLTreeMenu li {list-style:none;padding:0;}

.Closed ul {display:none;}

.Child img.s {background:none;cursor:default;}

#CNLTreeMenu1 ul {margin:0 0 0 17px;}

#CNLTreeMenu1 img.s {width:20px;height:15px;}

#CNLTreeMenu1 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu2 ul {margin:0 0 0 17px;}

#CNLTreeMenu2 img.s {width:20px;height:15px;}

#CNLTreeMenu2 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu3 ul {margin:0 0 0 17px;}

#CNLTreeMenu3 img.s {width:20px;height:15px;}

#CNLTreeMenu3 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

/*CNLTreeMenu End*/

/*Temp CSS for View Demo*/

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {padding-bottom:15px;}

.ViewCode {

 clear:both;

 border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;

}

.ViewCode h6 {color:#00f;}

</style>

</head>

<body>

<h4>行为分析策略配置</h4>

<form method=post action="XMLmodifier2.jsp">

<div class="CNLTreeMenu" id="CNLTreeMenu1">

<p><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');">全部折叠</a><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');" style="display:none;">全部展开</a></p>

<ul>

<li>文件传输

    <input type="button" value="全选"onclick=selectall("CNLTreeMenu1")>

    <input type="button" value="全不选"onclick=unselectall("CNLTreeMenu1")>

<ul>

<li><input type="checkbox"value="FTP" name="FTP" onclick=setdisable("FTP")>FTP

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="FTPFTP">未知</li>

</ul>

</li>

<li><input type="checkbox"value="smtp" name="smtp" onclick=setdisable("smtp")>smtp

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="smtpsmtp">未知</li>

</ul>

</li>

<li><input type="checkbox"value="pop3" name="pop3" onclick=setdisable("pop3")>pop3

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="pop3pop3">未知</li>

</ul>

</li>

<li><input type="checkbox"value="POST" name="POST" onclick=setdisable("POST")>POST

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="POSTPOST">未知</li>

</ul>

</li>

</ul>

</li>

</ul>

</div><!-- CNLTreeMenu -->

</form>

<script type="text/javascript">

function Ob(o){

 var o=document.getElementById(o)?document.getElementById(o):o;

 return o;

}

function Hd(o) {

 Ob(o).style.display="none";

}

function Sw(o) {

 Ob(o).style.display="";

}

function ExCls(o,a,b,n){

 var o=Ob(o);

 for(i=0;i<n;i++) {o=o.parentNode;}

 o.className=o.className==a?b:a;

}

var b=1;

function CNLTreeMenu(id,TagName0) {

  this.id=id;

  this.TagName0=TagName0==""?"li":TagName0;

  this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);

  this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {

  this.ClassName0=ClassName0;

  this.ClassName1=ClassName1;

  this.ClassName2=ClassName2;

  this.ImgUrl=ImgUrl || "tree/s.gif";

  this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";

  this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";

  for (i=0;i<this.AllNodes.length;i++ ) {

   //this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";

   

   this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;

   }

 }

 this.SetNodes = function (n) {

  var sClsName=n==0?this.ClassName0:this.ClassName1;

  for (i=0;i<this.AllNodes.length;i++ ) {

   this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;

  }

 }

}

var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");

MyCNLTreeMenu1.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");

MyCNLTreeMenu2.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");

MyCNLTreeMenu3.InitCss("Opened","Closed","Child","tree/s.gif");

</script>



<SCRIPT type="text/javascript" LANGUAGE="JavaScript">

var namebox;

function checkAll(name){

   var name2=name+name;

   var object = document.getElementsByName(name2);

   var length = object.length;

   for (var i = 0; i < length; i++)

 {

     object[i].checked=true;

 }

}



function uncheckAll(name){

    var name2=name+name;

    var object = document.getElementsByName(name2);

    var length = object.length;

    for (var i = 0; i < length; i++)

  {

     object[i].checked=false;

  }

}



function switchAll(){

for (var j = 1; j <= 2; j++) {

box = eval("document.checkboxform.C" + j);

box.checked = !box.checked;

   }

}



function judge(name){

    var name1=name;

    if(document.getElementById(name1).checked==true)

    {checkAll(name1);}

  else

      {uncheckAll(name1);}

  }



function setdisable(name)

{

var name1=name+name;

var obj=document.getElementsByName(name1);

var len=obj.length;

for(n=0;n<len;n++){

if(document.getElementById(name).checked==true){obj[n].disabled=false;}

else{obj[n].disabled=true;}

}

onclick=judge(name);

}

function selectall(div){

  var input = document.getElementById(div).getElementsByTagName("input");

  for(var i=0;i<input.length;i++){

   input[i].disabled=false;e

   input[i].checked=true;

  }

}



function unselectall(div){

  var input = document.getElementById(div).getElementsByTagName("input");

  for(var i=0;i<input.length;i++){

  input[i].checked=false;

  }

}

</SCRIPT>

</body>

</html>
籽沫 2010-09-17
  • 打赏
  • 举报
 回复
不客气呢 没什么的 呵呵

我也没说太清楚呵呵，以后你要注意多实践运用，你把别人给的代码自己些的运行下就能发现问题的

好啦以后在有问题的话，在问我吧，很高兴能帮助你
tomorrow_jie 2010-09-17
  • 打赏
  • 举报
 回复
非常感谢，对不起哦，我知道应该还改了什么地方，但是找了一上午都没找到啊，哎眼睛不好使啊。谢谢你，我的问题的确解决了，非常感谢!!!!
籽沫 2010-09-17
  • 打赏
  • 举报
 回复
你仔细的看下我的给你的代码我改了2个东西呢

第一个是 js里面注释的那段是一个for循环初始class状态

第二个改的是 更改全部展开和收缩的默认display熟悉

你第二个没改 改了就可以了的




<p>

<a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');">全部折叠</a>

<a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');" style="display:none;">全部展开</a>

</p>

tomorrow_jie 2010-09-17
  • 打赏
  • 举报
 回复
谢谢你，但是你后半部分的解释我没看懂，您可以直接在要变动的代码后面注释上吗？我现在只是把for循环里面的那一句代码注释了，但是仍然有些问题，比如选项前面的展开和折叠的图标在打开网页时显示不出来，展开收缩的默认条件在哪儿改变啊？不好意思，请您耐心点，我实在是小白菜，没办法。
tomorrow_jie 2010-09-16
  • 打赏
  • 举报
 回复
先谢谢你那么认真的帮助我，你修改之后的代码变动的地方就只有那个for循环被注释掉了吗？我试了下，把那儿注释掉之后的确默认是展开了，而且全部折叠和展开也能用，但是子菜单前面的表示展开的小加号和折叠的小减号都没得了！

呵呵，不好意思我是个小白，这个完全不懂，代码是我在网上找的，可以请您再详细的说说吗？
怎么改可以让效果除了默认是展开之外，什么都不变。以下的代码可以供你看看效果.



<html>

<head>

<title>行为分析策略配置</title>

<meta lang="java" http-equiv="content-Type" content="text/html;charset=utf-8">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

a {text-decoration:none;}

a,a:visited {color:#000;background:inherit;}

body {margin:0 0 0 233px;padding:20px;font:12px tahoma,宋体,sans-serif;}

dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}

dd {margin:0 0 0 15px;}

h4 {margin:0 233px 0 0;padding:0;font-size:18px;text-align:center;}

p {margin:0;padding:0 0 0 18px;}

p a,p a:visited {color:#00f;background:inherit;}

/*CNLTreeMenu Start*/

.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}

.CNLTreeMenu ul {padding:0;}

.CNLTreeMenu li {list-style:none;padding:0;}

.Closed ul {display:none;}

.Child img.s {background:none;cursor:default;}

#CNLTreeMenu1 ul {margin:0 0 0 17px;}

#CNLTreeMenu1 img.s {width:20px;height:15px;}

#CNLTreeMenu1 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu2 ul {margin:0 0 0 17px;}

#CNLTreeMenu2 img.s {width:20px;height:15px;}

#CNLTreeMenu2 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu3 ul {margin:0 0 0 17px;}

#CNLTreeMenu3 img.s {width:20px;height:15px;}

#CNLTreeMenu3 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

/*CNLTreeMenu End*/

/*Temp CSS for View Demo*/

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {padding-bottom:15px;}

.ViewCode {

 clear:both;

 border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;

}

.ViewCode h6 {color:#00f;}

</style>

</head>

<body>

<h4>行为分析策略配置</h4>

<form method=post action="XMLmodifier2.jsp">

<div class="CNLTreeMenu" id="CNLTreeMenu1">

<p><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a></p>

<ul>

<li>文件传输

    <input type="button" value="全选"onclick=selectall("CNLTreeMenu1")>

    <input type="button" value="全不选"onclick=unselectall("CNLTreeMenu1")>

<ul>

<li><input type="checkbox"value="FTP" name="FTP" onclick=setdisable("FTP")>FTP

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="FTPFTP">未知</li>

</ul>

</li>

<li><input type="checkbox"value="smtp" name="smtp" onclick=setdisable("smtp")>smtp

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="smtpsmtp">未知</li>

</ul>

</li>

<li><input type="checkbox"value="pop3" name="pop3" onclick=setdisable("pop3")>pop3

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="pop3pop3">未知</li>

</ul>

</li>

<li><input type="checkbox"value="POST" name="POST" onclick=setdisable("POST")>POST

<ul>

<li class="Child"><input type="checkbox" disabled value="未知" name="POSTPOST">未知</li>

</ul>

</li>

</ul>

</li>

</ul>

</div><!-- CNLTreeMenu -->

</form>

<script type="text/javascript">

function Ob(o){

 var o=document.getElementById(o)?document.getElementById(o):o;

 return o;

}

function Hd(o) {

 Ob(o).style.display="none";

}

function Sw(o) {

 Ob(o).style.display="";

}

function ExCls(o,a,b,n){

 var o=Ob(o);

 for(i=0;i<n;i++) {o=o.parentNode;}

 o.className=o.className==a?b:a;

}

var b=1;

function CNLTreeMenu(id,TagName0) {

  this.id=id;

  this.TagName0=TagName0==""?"li":TagName0;

  this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);

  this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {

  this.ClassName0=ClassName0;

  this.ClassName1=ClassName1;

  this.ClassName2=ClassName2;

  this.ImgUrl=ImgUrl || "tree/s.gif";

  this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";

  this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";

  for (i=0;i<this.AllNodes.length;i++ ) {

   this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";

   this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;

   }

 }

 this.SetNodes = function (n) {

  var sClsName=n==0?this.ClassName0:this.ClassName1;

  for (i=0;i<this.AllNodes.length;i++ ) {

   this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;

  }

 }

}

var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");

MyCNLTreeMenu1.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");

MyCNLTreeMenu2.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");

MyCNLTreeMenu3.InitCss("Opened","Closed","Child","tree/s.gif");

</script>



<SCRIPT type="text/javascript" LANGUAGE="JavaScript">

var namebox;

function checkAll(name){

   var name2=name+name;

   var object = document.getElementsByName(name2);

   var length = object.length;

   for (var i = 0; i < length; i++)

 {

     object[i].checked=true;

 }

}



function uncheckAll(name){

    var name2=name+name;

    var object = document.getElementsByName(name2);

    var length = object.length;

    for (var i = 0; i < length; i++)

  {

     object[i].checked=false;

  }

}



function switchAll(){

for (var j = 1; j <= 2; j++) {

box = eval("document.checkboxform.C" + j);

box.checked = !box.checked;

   }

}



function judge(name){

	var name1=name;

	if(document.getElementById(name1).checked==true)

	{checkAll(name1);}

  else

  	{uncheckAll(name1);}

  }



function setdisable(name)

{

var name1=name+name;

var obj=document.getElementsByName(name1);

var len=obj.length;

for(n=0;n<len;n++){

if(document.getElementById(name).checked==true){obj[n].disabled=false;}

else{obj[n].disabled=true;}

}

onclick=judge(name);

}

function selectall(div){

  var input = document.getElementById(div).getElementsByTagName("input");

  for(var i=0;i<input.length;i++){

   input[i].disabled=false;

   input[i].checked=true;

  }

}



function unselectall(div){

  var input = document.getElementById(div).getElementsByTagName("input");

  for(var i=0;i<input.length;i++){

  input[i].checked=false;

  }

}

</SCRIPT>

</body>

</html>
籽沫 2010-09-16
  • 打赏
  • 举报
 回复 


<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

a {text-decoration:none;}

a,a:visited {color:#000;background:inherit;}

body {margin:0 0 0 233px;padding:20px;font:12px tahoma,宋体,sans-serif;}

dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}

dd {margin:0 0 0 15px;}

h4 {margin:0 233px 0 0;padding:0;font-size:18px;text-align:center;}

p {margin:0;padding:0 0 0 18px;}

p a,p a:visited {color:#00f;background:inherit;}

/*CNLTreeMenu Start*/

.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}

.CNLTreeMenu ul {padding:0;}

.CNLTreeMenu li {list-style:none;padding:0;}

.Closed ul {display:none;}

.Child img.s {background:none;cursor:default;}

#CNLTreeMenu1 ul {margin:0 0 0 17px;}

#CNLTreeMenu1 img.s {width:20px;height:15px;}

#CNLTreeMenu1 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu2 ul {margin:0 0 0 17px;}

#CNLTreeMenu2 img.s {width:20px;height:15px;}

#CNLTreeMenu2 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu3 ul {margin:0 0 0 17px;}

#CNLTreeMenu3 img.s {width:20px;height:15px;}

#CNLTreeMenu3 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

/*CNLTreeMenu End*/

/*Temp CSS for View Demo*/

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {padding-bottom:15px;}

.ViewCode {

 clear:both;

 border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;

}

.ViewCode h6 {color:#00f;}

</style>

</head>



<body>

<div class="CNLTreeMenu" id="CNLTreeMenu1">

<p>

	<a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');">全部折叠</a>

    <a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');" style="display:none;">全部展开</a></p>

<ul>

    <li>

        文件传输

        <input type="button" value="全选">

        <ul>

            <li>

                <input type="checkbox" value="FTP" name="FTP" onclick=setdisable("FTP")>

                FTP

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="FTPFTP">

                        未知

                    </li>

                </ul>

            </li>

            <li>

                <input type="checkbox" value="smtp" name="smtp" onclick=setdisable("smtp")>

                smtp

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="smtpsmtp">

                        未知

                    </li>

                </ul>

            </li>

            <li>

                <input type="checkbox" value="pop3" name="pop3" onclick=setdisable("pop3")>

                pop3

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="pop3pop3">

                        未知

                    </li>

                </ul>

            </li>

            <li>

                <input type="checkbox" value="POST" name="POST" onclick=setdisable("POST")>

                POST

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="POSTPOST">

                        未知

                    </li>

                </ul>

            </li>

        </ul>

    </li>

</ul>

</div>

<script type="text/javascript">

function Ob(o){

 var o=document.getElementById(o)?document.getElementById(o):o;

 return o;

}

function Hd(o) {

 Ob(o).style.display="none";

}

function Sw(o) {

 Ob(o).style.display="";

}

function ExCls(o,a,b,n){

 var o=Ob(o);

 for(i=0;i<n;i++) {o=o.parentNode;}

 o.className=o.className==a?b:a;

}

var b=1;

function CNLTreeMenu(id,TagName0) {

  this.id=id;

  this.TagName0=TagName0==""?"li":TagName0;

  this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);

  this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {

  this.ClassName0=ClassName0;

  this.ClassName1=ClassName1;

  this.ClassName2=ClassName2;

  this.ImgUrl=ImgUrl || "tree/s.gif";

  this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";

  this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";

  /*for (i=0;i<this.AllNodes.length;i++ ) {

  this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";

  this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;

  }*/

 }

 this.SetNodes = function (n) {

  var sClsName=n==0?this.ClassName0:this.ClassName1;

  for (i=0;i<this.AllNodes.length;i++ ) {

  this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;

  }

 }

}

var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");

MyCNLTreeMenu1.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");

MyCNLTreeMenu2.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");

MyCNLTreeMenu3.InitCss("Opened","Closed","Child","tree/s.gif");

</script>



</body>

</html>
籽沫 2010-09-16
  • 打赏
  • 举报
 回复
不用了 我晕死 我知道问题了 ==下我给你调试了在发给你个，我是说呢 你这个js是直接在载入的时候就执行了 反正前面的话没找到文档流加载出错了！

你==下我去给你改
籽沫 2010-09-16
  • 打赏
  • 举报
 回复 


<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

a {text-decoration:none;}

a,a:visited {color:#000;background:inherit;}

body {margin:0 0 0 233px;padding:20px;font:12px tahoma,宋体,sans-serif;}

dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}

dd {margin:0 0 0 15px;}

h4 {margin:0 233px 0 0;padding:0;font-size:18px;text-align:center;}

p {margin:0;padding:0 0 0 18px;}

p a,p a:visited {color:#00f;background:inherit;}

/*CNLTreeMenu Start*/

.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}

.CNLTreeMenu ul {padding:0;}

.CNLTreeMenu li {list-style:none;padding:0;}

.Closed ul {display:none;}

.Child img.s {background:none;cursor:default;}

#CNLTreeMenu1 ul {margin:0 0 0 17px;}

#CNLTreeMenu1 img.s {width:20px;height:15px;}

#CNLTreeMenu1 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu1 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu2 ul {margin:0 0 0 17px;}

#CNLTreeMenu2 img.s {width:20px;height:15px;}

#CNLTreeMenu2 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu2 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

#CNLTreeMenu3 ul {margin:0 0 0 17px;}

#CNLTreeMenu3 img.s {width:20px;height:15px;}

#CNLTreeMenu3 .Opened img.s {background:url(tree/opened.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Closed img.s {background:url(tree/closed.gif) no-repeat 0 0;}

#CNLTreeMenu3 .Child img.s {background:url(tree/child.gif) no-repeat 3px 5px;}

/*CNLTreeMenu End*/

/*Temp CSS for View Demo*/

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}

#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {padding-bottom:15px;}

.ViewCode {

 clear:both;

 border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;

}

.ViewCode h6 {color:#00f;}

</style>

<script type="text/javascript">

function Ob(o){

 var o=document.getElementById(o)?document.getElementById(o):o;

 return o;

}

function Hd(o) {

 Ob(o).style.display="none";

}

function Sw(o) {

 Ob(o).style.display="";

}

function ExCls(o,a,b,n){

 var o=Ob(o);

 for(i=0;i<n;i++) {o=o.parentNode;}

 o.className=o.className==a?b:a;

}

var b=1;

function CNLTreeMenu(id,TagName0) {

  this.id=id;

  this.TagName0=TagName0==""?"li":TagName0;

  this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);

  this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {

  this.ClassName0=ClassName0;

  this.ClassName1=ClassName1;

  this.ClassName2=ClassName2;

  this.ImgUrl=ImgUrl || "tree/s.gif";

  this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";

  this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";

  for (i=0;i<this.AllNodes.length;i++ ) {

  this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";

  this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;

  }

 }

 this.SetNodes = function (n) {

  var sClsName=n==0?this.ClassName0:this.ClassName1;

  for (i=0;i<this.AllNodes.length;i++ ) {

  this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;

  }

 }

}

var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");

MyCNLTreeMenu1.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");

MyCNLTreeMenu2.InitCss("Opened","Closed","Child","tree/s.gif");

var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");

MyCNLTreeMenu3.InitCss("Opened","Closed","Child","tree/s.gif");

</script>

</head>



<body>

<div class="CNLTreeMenu" id="CNLTreeMenu1">

<p>

	<a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a>

    <a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a></p>

<ul>

    <li>

        文件传输

        <input type="button" value="全选">

        <ul>

            <li>

                <input type="checkbox" value="FTP" name="FTP" onclick=setdisable("FTP")>

                FTP

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="FTPFTP">

                        未知

                    </li>

                </ul>

            </li>

            <li>

                <input type="checkbox" value="smtp" name="smtp" onclick=setdisable("smtp")>

                smtp

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="smtpsmtp">

                        未知

                    </li>

                </ul>

            </li>

            <li>

                <input type="checkbox" value="pop3" name="pop3" onclick=setdisable("pop3")>

                pop3

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="pop3pop3">

                        未知

                    </li>

                </ul>

            </li>

            <li>

                <input type="checkbox" value="POST" name="POST" onclick=setdisable("POST")>

                POST

                <ul>

                    <li class="Child">

                        <input type="checkbox" disabled value="未知" name="POSTPOST">

                        未知

                    </li>

                </ul>

            </li>

        </ul>

    </li>

</ul>

</div>

</body>

</html>


你看下你是不是少给我东西了 我这边找不到对象 没法调试！

你把你HTML整理下给我个完整的我才好去调试
tomorrow_jie 2010-09-16
  • 打赏
  • 举报
 回复
我试过把none改成block，改了之后，的确是展开了，但是不能手动的折叠了，折叠的功能不可用了。
<form method=post action="XMLmodifier2.jsp">
<div class="CNLTreeMenu" id="CNLTreeMenu1">
<p><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a></p>
<ul>
<li>文件传输 <input type="button" value="全选">
<ul>
<li><input type="checkbox"value="FTP" name="FTP" onclick=setdisable("FTP")>FTP
<ul>
<li class="Child"><input type="checkbox" disabled value="未知" name="FTPFTP">未知</li>
</ul>
</li>
<li><input type="checkbox"value="smtp" name="smtp" onclick=setdisable("smtp")>smtp
<ul>
<li class="Child"><input type="checkbox" disabled value="未知" name="smtpsmtp">未知</li>
</ul>
</li>
<li><input type="checkbox"value="pop3" name="pop3" onclick=setdisable("pop3")>pop3
<ul>
<li class="Child"><input type="checkbox" disabled value="未知" name="pop3pop3">未知</li>
</ul>
</li>
<li><input type="checkbox"value="POST" name="POST" onclick=setdisable("POST")>POST
<ul>
<li class="Child"><input type="checkbox" disabled value="未知" name="POSTPOST">未知</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- CNLTreeMenu -->
html代码就如上所示
籽沫 2010-09-16
  • 打赏
  • 举报
 回复
.Closed ul {display:none;} 改为

.Closed ul {display:block;}或者去掉这段代码

因为看不到你的html部分只能这么猜测了，然后你的js我看了下主要是遍历找节点的没有涉及用默认全部隐藏，应该就是你css这段定义的问题
收藏整理-Js无限级树形菜单
整理非原创，非常灵活的js无限级树形菜单，可以赋值以取得默认展开的父菜单
winform 无限级树形菜单
winform 无限级树形菜单，做成了自定义控件
ASP.NET源码——无限级树形菜单(Sql数据库).zip
ASP.NET源码——无限级树形菜单(Sql数据库).zip
无限级树型选择菜单
无限级树型选择菜单，可用来作为左侧的选择菜单，是从实际项目中抽离出来的，具体的树节点数据可能需要修改，只要实现与父子节点的逻辑关系即可
Div+Css+js树形菜单
通过div层、css样式和js特效制作树形菜单，功能齐全、界面简洁大方
CSS

61,129

社区成员

60,711

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章