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

CSDN论坛 > Web 开发 > HTML(CSS)

如何将无限级树形菜单设置为默认展开 [问题点数：40分，结帖人tomorrow_jie]

⋅关于在xpath中插入变量的问题 ⋅请教一个正则表达式的问题 ⋅写网页抓取程序在URL编码上遇到的问题 更多帖子 关注空间博客 tomorrow_jie 本版专家分：0 结帖率 96.55%: 以下是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>
现在状态是打开网页，默认是折叠的，我想请问下如何修改代码使网页打开时树形菜单是展开的，可以手动折叠。请懂的同志不吝赐教，谢谢各位！

0 2010-09-16 12:24:46

回复数 11 只看楼主引用举报楼主

⋅博客为什么老是莫名其妙的给关闭 ⋅不间断滚动一卡一卡是为什么？ ⋅【help】淘宝无间断焦点图原理 更多帖子 关注空间博客 籽沫 本版专家分：4693: .Closed ul {display:none;} 改为

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

因为看不到你的html部分只能这么猜测了，然后你的js我看了下主要是遍历找节点的没有涉及用默认全部隐藏，应该就是你css这段定义的问题

0 2010-09-16 13:11:35

只看TA 引用举报 #1 得分 0

树形菜单树形菜单 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &am

⋅关于在xpath中插入变量的问题 ⋅请教一个正则表达式的问题 ⋅写网页抓取程序在URL编码上遇到的问题 更多帖子 关注空间博客 tomorrow_jie 本版专家分：0: 我试过把none改成block，改了之后，的确是展开了，但是不能手动的折叠了，折叠的功能不可用了。
<form method=post action="XMLmodifier2.jsp">
<div class="CNLTreeMenu" id="CNLTreeMenu1">
<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>
<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>
html代码就如上所示

0 2010-09-16 14:05:33

只看TA 引用举报 #2 得分 0

html树形菜单控件 jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree。主页:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 下载:http://jquery.bassistance.de/treeview/jquery.treeview.zip 示例:http://j

⋅博客为什么老是莫名其妙的给关闭 ⋅不间断滚动一卡一卡是为什么？ ⋅【help】淘宝无间断焦点图原理 更多帖子 关注空间博客 籽沫 本版专家分：4693



<!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整理下给我个完整的我才好去调试

0 2010-09-16 14:44:16

只看TA 引用举报 #3 得分 0

js 树形菜单（全）这就是一个js 树形菜单。（摘要必须大于50个字节！摘要必须大于50个字节！）

⋅博客为什么老是莫名其妙的给关闭 ⋅不间断滚动一卡一卡是为什么？ ⋅【help】淘宝无间断焦点图原理 更多帖子 关注空间博客 籽沫 本版专家分：4693: 不用了我晕死我知道问题了 ==下我给你调试了在发给你个，我是说呢你这个js是直接在载入的时候就执行了反正前面的话没找到文档流加载出错了！

你==下我去给你改

0 2010-09-16 14:45:17

只看TA 引用举报 #4 得分 0

树形层级菜单在项目中，我们经常会需要一些树状结构的样式来显示层级结构等，比如下图的样式，之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便。但是利用Jquery的一些插件，也是可以实现这些效果的，比如说Jquery.treeview.js插件。　　　　下面就直入主题，开始从简入繁的分析怎么使用treeview插件，从已知的知识开始轻松入手，让树状结构唾手可得。　　　显示树



<!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>

0 2010-09-16 15:35:48

只看TA 引用举报 #5 得分 0

⋅关于在xpath中插入变量的问题 ⋅请教一个正则表达式的问题 ⋅写网页抓取程序在URL编码上遇到的问题 更多帖子 关注空间博客 tomorrow_jie 本版专家分：0

先谢谢你那么认真的帮助我，你修改之后的代码变动的地方就只有那个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>

0 2010-09-16 17:25:25

只看TA 引用举报 #6 得分 0

vue制作一个无限层级伸缩树形菜单栏使用v-for循环生成一个多级嵌套菜单栏，只要你学会了这个方法，几乎所有的菜单栏都可以实现了。实例1：不能伸缩的多级菜单栏现在以一个三级菜单栏为例： &lt;div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"&gt;&lt;a&gt;{{obj.title}}&lt;/a&gt; &

这样就好了，没事的呢不客气

是我开始没看清楚你的代码，我不知道它的子栏目也是可以折叠展开的，所以在那个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>

0 2010-09-17 08:34:40

只看TA 引用举报 #7 得分 0

收藏整理-Js无限级树形菜单整理非原创，非常灵活的js无限级树形菜单，可以赋值以取得默认展开的父菜单

⋅关于在xpath中插入变量的问题 ⋅请教一个正则表达式的问题 ⋅写网页抓取程序在URL编码上遇到的问题 更多帖子 关注空间博客 tomorrow_jie 本版专家分：0: 谢谢你，但是你后半部分的解释我没看懂，您可以直接在要变动的代码后面注释上吗？我现在只是把for循环里面的那一句代码注释了，但是仍然有些问题，比如选项前面的展开和折叠的图标在打开网页时显示不出来，展开收缩的默认条件在哪儿改变啊？不好意思，请您耐心点，我实在是小白菜，没办法。

0 2010-09-17 15:18:09

只看TA 引用举报 #8 得分 0

原生JS无限级树形菜单（兼容各浏览器）原生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

你仔细的看下我的给你的代码我改了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>

0 2010-09-17 15:52:51

只看TA 引用举报 #9 得分 40

JS封装的一个无限级的下拉树形菜单（收藏一下） &lt;title&gt;【荐】JS封装的一个无限级的下拉树形菜单_网页代码站(www.webdm.cn)&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin:0; padding:0; list-style:none;} body { margin:20px;} h2 { font-family:"黑体";...

⋅关于在xpath中插入变量的问题 ⋅请教一个正则表达式的问题 ⋅写网页抓取程序在URL编码上遇到的问题 更多帖子 关注空间博客 tomorrow_jie 本版专家分：0: 非常感谢，对不起哦，我知道应该还改了什么地方，但是找了一上午都没找到啊，哎眼睛不好使啊。谢谢你，我的问题的确解决了，非常感谢!!!!

0 2010-09-17 16:23:04

只看TA 引用举报 #10 得分 0

⋅博客为什么老是莫名其妙的给关闭 ⋅不间断滚动一卡一卡是为什么？ ⋅【help】淘宝无间断焦点图原理 更多帖子 关注空间博客 籽沫 本版专家分：4693: 不客气呢没什么的  呵呵

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

好啦以后在有问题的话，在问我吧，很高兴能帮助你

0 2010-09-17 16:47:28

只看TA 引用举报 #11    得分 0

jQuery实现树形菜单的三种方法 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;树形菜单&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery-1.8.3.js"&am

收藏帖子

18个精心整理的树形导航菜单: 精心整理各种导航菜单，值得学习和推荐！稍微修改即可利用！div+css+js实现菜单的收缩与展开QQ菜单可折叠，JS+CSS很漂亮爆炸式菜单，点击后展开标签在左侧的CSS竖向简洁选项卡。

Java中树形菜单分析和实现: 背景概述最近在搭建基于Spring Boot(2.0.2)种子项目框架时，遇到了树形菜单加载问题。特此把解决的问题方案记录下去，供其他小伙伴参考和日后回顾。方案分析方案选择一次性加载完，返回前台需要的数据结构点击加载，默认记载根层级的菜单。后续点击那一级菜单加载其下的子节点方案实现在这里只分析一次性加载实现。第二种实现起来更简单。在这里略过。有兴趣可以自己研究一下...

SQLServer实现无限级树结构: 表结构如下：数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去 create procedure test as begin declare @len i...

Java 无限级递归生成树级菜单: 有做过网站菜单的童鞋，都知道树级结构，因为展开的形式就是一棵树一样，有父节点、子节点。实现树级结构菜单的形式有很多，例如主从表的形式，一张表存父节点，一张表存子节点，这种方式可能存在一种问题，就是只能支持两级，并且不容易进行扩展。在这里，我想讲的是另一种形式，单表存储的方式。即一张表里面既有子节点，又有父节点，然后实现树级结构，具体介绍请往下看：一、表结构 ...

js无限级树形菜单js无限级树形菜单js无限级树形菜单: js无限级树形菜单js无限级树形菜单js无限级树形菜单

无限级树形菜单(Sql数据库): 无限级树形菜单(Sql数据库)

基于react实现无限分级菜单: 在开发CMS（内容管理系统）系统时，一般都会用到一个侧边栏或者顶部的二级或者三级菜单，当点击或者鼠标悬浮时，菜单能够随之展开或收起。本文纯粹为了练习一下react，因此我会在react环境下实现这么一个小组件：它假设了菜单数据来自于网络请求，并且仅实现无限分级菜单的核心功能（父子关系，展开与收起），至于样式则不是关注的重点。分析&设计既然要实现一个动态生成的无限分级菜单，最

TreeUtil 数据库菜单生成无限级树形结构: 1、项目需求：从数据库从加载所有的菜单出来，菜单中有 id,parentId,name字段希望能有一个工具帮我进行树形结构重组；实例类： package com.lming.chcservice.util; import lombok.Data; import java.util.List; @Data public class TreeNode

无限级树形菜单（支持多选）: 无限级数的属性菜单，并且支持多选功能

jquery,tree无限级树形菜单+简单实用案例: jquery,tree无限级树形菜单+简单实用案例我在项目中用到产品类别的树形。各种地方都要用。我就封装起来，方便以后调用。记录下来，希望给新手们提供帮助。要记得导入jquery.js tree.js 哦 %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

PHP生成无限级菜单树: 俗话说：程序猿会一门语言，再学其他的也会很快，一个学Java的，让做PHP，这里就记录一下PHP生成菜单树，实现分层，原理：递归，语音：PHP 数据格式：没有树结构化的数组，例如： Array ( [0] =&gt; Array ( [CategoryID] =&gt; 1 [CategoryLayer] =...

使用Jquery+bootstrap无限级菜单树: 无限级菜单树的实现效果从数据库提取出来的原始数据前台代码需要的数据{ "code": 100, "extend": { "children": [ { "children": [ { "children": [

纯ajax＋sqlserver无限级树形菜单．: ajax这个当今流行的技术名词,几年前ajax开始流行时,也花过点时间研究了一下ajax.net控件．只是工作原因，一直没有用到项目中去．一晃几年ajax依旧如火如荼．最近闲来无事，重温ajax．就好象AJAX当初被遗弃，现在又被热捧一样．这次我没有去下载ajax.net,altas等控件．而是从ajax基础看起，呵呵，一种一切从头开始开始感觉．反正是闲来无事．． ibm 中国开发

jquery+css+html无限级tree树形菜单（含复选框）: 由jquery库加自定义css创建的无限级树形菜单，向下兼容IE8

easyUI-树形菜单(ComboTree) 无限层级树实现方式: 对于easyUI实现一个树，是一件很简单的事情，实现形式很多。这里作者将实现，通过数据库获取数据，再将数据通过递归形式装成无限层级json数据，到达无限成级的树结构。需要用到的json插件建附件，希望能对大家有所帮助效果如图 CREATE TABLE `role` ( `id` varchar(32) NOT

树形下拉菜单----无限级: 自己写的树形下拉菜单，可以无限级的重复用。这里直接复制了整个文件，直接复制粘贴就可以观察效果了。哦，记得引用外部的js库文件。无标题文档 $(document).ready(function() { $('ul li ul').hide(); $('...

原生JS树菜菜单(无限级、兼容各浏览器): 原生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

java实现构造无限层级树形菜单: java实现构造无限层级树形菜单连接

基于图数据库的无限级菜单存储: 无限级菜单或者说无限级分类，在实际项目中比较实用，目前比较主流的设计是通过关系型数据库进行存储，通常一个表中包含id，content，fid三个字段，content是菜单的名称，id是菜单的id，而fid是该菜单的上一级菜单，一般fid为0或者1的表示顶级菜单.后台程序通过递归进行查询。但这种方法，在菜单层级比较深之后，查询以及权限控制就不是那么方便了。比如要查询一个菜单的所有子菜单以及其的层级关...

c#实现无限级树菜单实例: c#实现无限级树菜单实例，使用递归方法，有需要的朋友看看。

asp.net树形结构菜单demo/无限级分类/zTree: jquery的一个插件zTree.此demo是用vs08+sql2005写的可任意修改像样更多的功能和外观就去zTree官网下一个我写的这个是动态的就是说是连接数据库的 class表必须的字段 ID 父ID 还有类别名称。不懂的可以随时问我

php实现无限级树型菜单（函数递归算法）: 大概步骤如下：首先到数据库取数据，放到一个数组，然后把数据转化为一个树型状的数组，最后把这个树型状的数组转为html代码。也可以将第二步和第三步合为一步。详细如下： 1。数据库设计：脚本如下： CREATE TABLE `bg_cate` ( `cate_Id` int(30) unsigned NOT NULL AUTO_INCREMENT, `cate_ParentId`

Jquery实现无限级树状结构并动态添加增删改等编辑功能: 打开演示地址 http://www.56gee.com/Detail/2012/04/11/8AEB74E423/ Jquery实现无限极树状结构并动态添加增删改等编辑功能——56gee div, ul, li { margin: 0px; padding: 0px; list-style-type: none; } body {

s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar: s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单

前端框架 zTree 从数据库中动态加载树形菜单: 前端框架 zTree 从数据库中动态加载树形菜单前端框架

python生成无限级树形菜单json: python生成无限级树形菜单json models.py class Fl(models.Model): flxh = models.AutoField(u’分类序号’,primary_key=True) flmc = models.CharField(u’分类名称’,max_length=255) flbm = models.ForeignKey(“self”,verbose_name=u’上...

Js操作树节点自动折叠展开: 文件全景图 {collapsible:true,split:true,animFloat:false,autoHide:false,useSplitTips:true,bodyStyle:'padding:0px;'}

关于无限级理解，及其树形结构: 首先在表中含有parent_id字段树级菜单的顶层parent_id=0 那么如何根据顶层菜单查找它所属的子级菜单呢？思路如下：首先找到parent_id=0的记录（可以有多条，意味的多条顶级菜单）；根据该条记录的id（此id作为子级菜单的parent_id），查找parent_id为该条记录的id 一直递归下去即可下面给出一段例子 (1, '商品列表', 'Admin',

jQuery递归实现菜单无限级: jquery,tree无限级树形菜单+简单实用案例我在项目中用到产品类别的树形。各种地方都要用。我就封装起来，方便以后调用。记录下来，希望给新手们提供帮助。要记得导入jquery.js tree.js 哦 %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

使用tree实现无限级树形菜单: //使用tree实现无限级树形菜单//使用tree实现无限级树形菜单（单张表） SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["字符串"].ConnectionString); string cmdText = "SELECT * FROM CkType W

layui动态无限极菜单: 效果图参考文章：https://www.wanpishe.top/detail?blogId=644aa177-9795-456a-8090-ee1264bf5d9d

不用递归实现的无限级树型菜单: 不用递归实现的无限级树型菜单,加载速度超快。

基于angularjs的嵌套指令实现无限级下拉树菜单: 该文件包含css样式和package.json文件，配合博客《基于angularjs的嵌套指令实现无限级下拉树菜单》使用。

2个无限级树状menu带图标与唯一展开: 2个无限级树状menu带图标与唯一展开2个无限级树状menu带图标与唯一展开

递归无限级树下拉菜单: 项目中需要用到无限级树型下拉菜单，花时间折腾了一下。在此记录下来以备后用！效果图: /** *树形菜单VO */ public class SelectTree implements Serializable{ private int id; private String name; private List&lt;SelectTree&gt...

利用多叉树实现Ext JS中的无限级树形菜单（一种构建多级有序树形结构JSON的方法）: 利用多叉树实现Ext JS中的无限级树形菜单（一种构建多级有序树形结构JSON的方法）转载地址:http://www.iteye.com/topic/1119961 一、问题研究的背景和意义目前在Web应用程序开发领域，Ext JS框架已经逐渐被广泛使用，它是富客户端开发中出类拔

React中通过tree组件实现不确定层级的折叠菜单效果: 1、实现效果折叠菜单的层级可以不相同、可以无限层级，具体根据读取的数据库数据为依据菜单内容读取数据库获得具体效果如下折叠菜单是否可以继续召开取决于前面是否有可召开图标，如下图所示2、实现原理初始化加载页面并未获取全部层级的数据，只是第一层级如果有子层级则呈现可展开图标，可进一步加载呈现下一层级菜单内容，否则没有是否可继续加载呈现下一层级，原理同上3、代码实现分步解析（1）第一步：依赖组件本效果的实...

无限级树型菜单dTree中文API帮助文档之功能篇: 目录功能 addopenAllcloseAllopenTo 配置功能add()添加一个节点到树形菜单里，只有当树形菜单加载完毕后才可以执行此方法，id、pid、name不能为空名称类型描述 id Number 值唯一 pid Number 和父id关联，如果是根节点值必须为-1 name String 节点名称 url...

jquery dtree 实例动态实现无限树形菜单(增删改查）: jquery dtree 实例 无限树形菜单 实现增删改查

ztree设置默认第二级菜单展开: 需求：树的第二级节点默认展开，而非所有节点都展开 方案： var treeObj = $.fn.zTree.getZTreeObj("zTree"); var nodes = treeObj.getNodes(); for (var i = 0; i //设置节点展开 treeObj.expandNode(nodes[i], true, false

多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）: 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）一、问题研究的背景和意义在Web应用程序开发领域，基于AJAX技术的JavaScript树形控件已经被广泛使用，它用来在Html页面上展现具有层次结构的数据项。目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件，例如jQuery、Dojo、Yaho

php无限分类与树形菜单: <?php namespace App\lib; /** * @name PHPTree * @author crazymus * @des PHP生成树形结构,无限多级分类 * @version 1.2.0 * @Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) * @updated 2015-08-26 */

jq无限极下拉菜单和点击展开菜单: 一、html部分 Document 菜单项1 子菜单项11

纯css实现多级折叠菜单，折叠树: 1、参考自csdn，（http://blog.csdn.net/woshisap/article/details/6679977）为了适应项目，精简其样式并稍作修改，记录在博客里。 2、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。当有子菜单时，菜单项右

bootstrap treeview 无限子级菜单展示与JSON处理完整: 这几天上网找了bootstrap treeview例子但是看别人写的/贴的代码都是模棱两可思路也说的让人摸不着头脑只言片语索性自己写一个在此整理一下希望可以帮助一些需要使用bootstrap treeview但又不太会处理的同学也帮助自己更好的记忆架构用的maven + spring + spring MVC + mybatis 这里不展现架构只展现部分重要内容下面展...

js无限极菜单实现: 当前位置：懒人建站 > javascript教程 > js递归算法实现无限级树形菜单 来源：懒人建站工作室作者：懒人建站日期：2017-01-10 人气:8471 QQ交流群:4188479 js递归算法实现无限级树形菜单，主要是学习下用js递归算法实现无限级树形菜单，在学习php的时候网站后台要用到无限级栏目，于是就试着写无限级树形菜单，这里没有使用php

Angular 实现树形菜单（多级菜单）功能模块: 前言本文要分享的是一个多级菜单效果，也就是传说中的树形结构菜单，理论上支持无限级菜单，当然数据结构要一定的要求，但这都不是什么难事，因为我们可以把数据组装成所需要的结构。下面这个例子虽然不是很完美好，但是估计也够用了。这个多级菜单是模仿 Angular 官方的左侧菜单效果来做的，效果的相似度应该达到 99%，本文内容有点多（主要是代码），因为我想把所有的代码都贴出来，尽量不让你幻想缺失的代码。好了...

angular tree 异步加载下一级菜单的正确修改方式: angular-bootstrap-nav-tree 异步请求下一级菜单，需要对指令进行修改。实现了好开心，和记录下，以备事后遗忘。

用html+css+js实现一个无限级树形控件: 题目描述：用html+css+js实现一个无限级树形控件，功能如下： 1.利用html、css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消，点击叶节点勾选图标可以选中或取消思路：以上是一道题的题目描述，但是树形结构是如何给出的题目并没有说明，所以每个人都有不同的想法。（自己百度了一顿也没有百度到 (⊙⊙) ）想法： 1、假如给...

CNL Tree Menu 无限级CSS树形菜单兼容各浏览器: CNL Tree Menu 无限级CSS树形菜单 兼容各浏览器! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

ASP实现的无限级会员树型结构: ********************************** 函数名称:Function nodeUser(parent)* 函数参数:parent* 参数类型 :string* 返回值类型:--* 函数功能:递归显示用户树型结构* 作者:范维肖* 时间:2004-5-7*********************************Function nodeUser(

CSDN无限级树数据库版(ASP+ACCESS): 近来论坛里问树的问题比较多,特意推出近日完成的无限级树,由于水平有限,不完善之处望各位网友指正和完善。1.实现原理使用文件：(a)deeptree.htm:显示树型菜单的文件(deeptree.asp为显示菜单权限的例子)(b)deeptree.htc:对数据的请求和加载等操作进行封装.使用xmlhttp异步地请求，并对返回的数据用xsl进行格式输出(c)deeptree.cs

DWZ 树形导航菜单: DWZ 树形导航菜单

vue单个组件实现无限层级多选菜单: wTree.vue原理：每一个多选框都是一个节点，每个节点就是一个wtree组件，有父级（顶级level为0）,有子级（底层list[]是空的），组件之间状态传递是通过组件通信传递，对于外部数据checkList数组的修改是通过store实现的。初始化从底层状态传递到上层，一层一层传递。改变状态，不同状态改变，修改checklist数组。大概就这个思路，下面是代码：&lt;template&gt;...

ztree 默认展开前三级节点的实现: 引入ztree必要配置文件：&lt;script src="js/jquery.ztree.core.js"&gt;&lt;/script&gt;&lt;link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css"&gt;html &lt;ul id="planTree" class="ztree&quot

无限级别树形结构类别编辑ASP+ACCESS完美版: 为了共享资源移植到ACCESS数据库上，经过测试基本稍作修改可以放在系统中使用。使用了递归和一段展现树形结构的javascrip代码，功能已经完美。经过测试。

递归方法无限级菜单--javascript v1.0: 菜单遍历用递归的方法最简单，不用考虑有多少级，可以实现全部遍历，前提是后台代码的规范性，一般从后台返回的数据是json格式，这里有两种结构，一种是用pid的形式，一种是用children的形式。

无限级多选树型菜单（checkbox Tree）: 无限级多选树型菜单（checkbox Tree）

c#管理系统菜单生成树无限级: 数据库的结构首先数据库设计时一定要有parentID这个字段才能够知道菜单应该放在哪个父菜单下面，类似于：然后是新建两个实体类来进行操作： public class MenuModel { public int id { get; set; } public int parentID { get; set; } } publi...

不用递归实现无限级下拉树高效算法【原创】: 在公司项目中用递归生成 Tree 时，出现了很严重的性能问题，在google 中 go 很久，也没有找到不用递归实现无限级 Tree 的算法。后来，抱着尝试的心理。结果，我用两个循环就搞定了。自认为这个算法应该很高效，以后递归树的地方我就用这个算法了。不过，需要注意的是，你的数据必须是根据ID从小到大排过序的。否则，就会显示不正确。如果数据无序，建议你先排序然后才调用此算法。看来，我还是相当聪明的...

ASP.NET AJAX 无限级 JS 树形菜单: ASP.NET AJAX 无限级 JS 树形菜单

VB仿TreeView控件实现多级树状菜单: 内容索引:VB源码,界面编程,TreeView,树型菜单　　VB模仿TreeView控件的功能，一个可以实现多级树状展开、折叠的菜单，程序虽小，但经常使用，VB6下顺利编译，它可以无限级展开下去，只需你在程序里设置一下，每一项菜单中包含有复选框，可以同时选中菜单的某项是否生效。

asp.net 树TreeView 默认展开二级菜单: 在数据绑定之后进行 foreach (TreeNode item in TreeViewTest.Nodes) { item.Expanded = true; }

JS无限级树形菜单: JS无限级树形菜单3种

cnltreemenuver1.0.2: 不错的树形控件。。。 无限级css树形菜单。。。

c#树形菜单: C# 无限级树形菜单,winfrom实现的

asp.net jquery开发的书型菜单: asp.net利用jquery开发的无限级树形菜单

JavaScript树形控件实现无限级树形菜单: JavaScript树形控件实现无限级树形菜单

Java树形菜单的递归实现: 查询条件为 parentId select * from table where parentId =？第一次调用传 0,表示根 getNode(0); public void getNode(int pid){ List list = ..查询...(pid); //执行查询,自己写吧 if(list !=null &amp;&amp; list.size()!=0){//判断...

php无限分类树状菜单经典代码: ); $sq

无限级分类-树形结构: html代码： (tr里面写当前分类的父级id，点击的按钮里面写当前分类的自增id) @foreach($info as $key =&gt; $value) &lt;tr data-pid="{{$value['parent_id']}}" @if($value['parent_id'] !== 0){{'class=hide'}}@endif&gt; &lt;t...

三行代码实现树形菜单（xmlTree标签实例）: xmlTree标签实例，三行代码实现树形菜单：1、引入树操作JavaScript脚本文件；2、图片路径及节点编号首字符；3、引入xml文件并显示树形菜单

结构-行为-样式 - angularJs 指令实现无限级下拉列表: A、数据格式： [ { "groupKey": "c1", "name": "项目营销", "selectHide": false, "son": [ { "groupKey": "c1t1", "name": "项目一&q

jTree的遍历所有节点，默认选择节点，默认展开节点: jtree遍历所有节点： public static void visitAllNodes2(JTree tree) { TreeNode root = (TreeNode)tree.getModel().getRoot();//取得tree的根节点 visitAllNodes(root); } public static ...

jsTree设置默认节点全部展开的方法: 最近项目有需求,当jsTree加载完毕的时候想让所有的节点都打开,便于用户操作,遂参考API,这里记录下来.好记性不如烂笔头: //jsTree的初始化 $tree.jstree({ 'plugins': ["search", "types", "wholerow", "state"], ... //...

dtree+jquery 动态实现无限树形菜单 （包括增删改查）: dtree+jquery 动态实现无限树形菜单 （包括增删改查）好不容易，搞出来的，不容易啊

使用JQuery层次选择器实现树形菜单的收缩/展开特效: 使用JQuery层次选择器实现树形菜单的收缩/展开特效 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jque

树形菜单大集合，带checkbox，带右键菜单，重命名，动态修改等: zTree 利用Jquery的核心代码，实现一套能完成大部分常用工作的Tree功能兼容 IE、FireFox、Chrome 等浏览器（对于IE 6.0的兼容问题将不做特殊维护）在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成和 Ajax异步加载两种方式支持多种事件响应及反馈支持 Tree 的节点移动支持任意更换皮肤（依靠css）支持极其灵活的Checkb

Android 实现自定义多级树控件和全选与反选的效果: 对于多级树的显示其实就是通过数据中各个节点的关系，通过不同的缩进来达到树的效果。而数据中主要要把握id，父节点pId，name的关系，来显示其效果。源码地址：http://download.csdn.net/detail/a123demi/8109643

jquery+js 实现无限级菜单(分销)树行结构: 该案列可用于菜单制作，树形结构关系，实战中只需把json数据用ajax获取即可

基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单: 基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单

无限级分类Asp.net Mvc实现: 无限级分类Asp.net Mvc实现 无限级分类涉及到异步加载子类、加载当前类和匹配问题，现在做一个通用的实现。（一）效果如下：（二）设计、实现及使用（1）数据库（a）表设计dbo.Categories 列名类型说明 CategoryId int 主键，增量为1的标识符

无限级菜单数据库设计: 第一种方案：表为两张，一张分类表，一张信息表。表1： `ID` int(10), `cID` tinyint(3) , `title` varchar(255), 表2： `cID` tinyint(3) , `parentID` tinyint(3)， `order` tinyint(3) , `name` varchar(255), 这样可以...

Linux下安装软件和卸载下载: Linux下安装软件和卸载 Linux下安装软件和卸载相关下载链接：[url=//download.csdn.net/download/lilaozishiyan/2231765?utm_source=bbsseo]//download.csdn.net/download/lilaozishiyan/2231765?utm_source=bbsseo[/url]

VC++编译全攻略 pdf .doc 编译选项设置下载: VC++编译全攻略 pdf .doc 编译选项设置编译设置，编译问题解决相关下载链接：[url=//download.csdn.net/download/zhang405744522/2292612?utm_source=bbsseo]//download.csdn.net/download/zhang405744522/2292612?utm_source=bbsseo[/url]

一个世博会会馆查询系统(c#)下载: 这是一个世博会查询系统，用于查询世博会的一些场馆，和世博会的一些信息。相关下载链接：[url=//download.csdn.net/download/jxwk199129/2431958?utm_source=bbsseo]//download.csdn.net/download/jxwk199129/2431958?utm_source=bbsseo[/url]

文章热词机器学习教程 Objective-C培训交互设计视频教程颜色模型设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标无限互联ios培训 java源码级学习

我们是很有底线的