我有一个js的菜单树 当我点击二级菜单后,它所属的一级菜单就不能点击了。而点其他一级菜单可以,怎么解决

JavaScript016

我有一个js的菜单树 当我点击二级菜单后,它所属的一级菜单就不能点击了。而点其他一级菜单可以,怎么解决,第1张

例如你有以下节点:

节点1,节点2,节点3

有以下四种方法

//展开树

function open(objNode){

//...your code 展开树

addClose(objNode)

}

//关闭树

function close(objNode){

//...your code 关闭树

addClose(objNode)

}

//添加展开事件

function addOpen(objNode){

//objNode节点对象

objNode.detachEvent.attachEvent("onclick",close)

objNode.attachEvent("onclick",open)

}

//添加关闭事件

function addClose(objNode){

//objNode节点对象

objNode.detachEvent.attachEvent("onclick",open)

objNode.attachEvent("onclick",close)

}

那么在生成树的时候给所有节点绑定方法open(objNode)就可以了。

上面的代码是用原生的JS写的。JQuery的。。你可以在网上找找如何绑定与删除事件。

用z-tree插件

①带有父子关系的标准

zTreeNodes

举例:

Js代码

1.var zTreeNodes = [

2.{"id":1, "name":"test1", "nodes":[

3.{"id":11, "name":"test11", "nodes":[

4.{"id":111, "name":"test111"}

5."id":12, "name":"test12"}

②带有父子关系的简单

Array

格式

(isSimpleData)的zTreeNodes

举例:

Js代码

1.var treeNodes = [

2. {"id":1, "pId":0, "name":"test1"},

3.{"id":11, "pId":1, "name":"test11"},

4. {"id":12, "pId":1, "name":"test12"},

5. {"id":111, "pId":11, "name":"test111"},

例子:

(Java代码)

①在页面引用

zTree的js和css:

Html代码

1.

<!-- ZTree树形插件 -->

2.<link

rel="stylesheet"

href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type

="text/css">

3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->

4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"

></script>

思路就是:找出父节点的所有子节点的checked的属性设置成与父节点一致即可

我是利用jquery实现,看看是否符合你的要求

<script src="../lib/jquery.js" type="text/javascript"></script>

<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#tree").treeview()

$("input[name='ids']").click(function(){

var checkedValue = this.checked

$(this).parent("li").find("input[name='ids']").attr("checked",checkedValue)

})

})

</script>

<ul id='tree'>

<li>

<input type='checkbox' name='ids' id="test"/>

<span class='folder'>test1</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test11</span>

</li>

</ul>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test12</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test121</span>

</li>

</ul>

</li>

</ul>

</li>

</ul>