200分，帮我把这个带复选框的属性菜单改成可以伸缩好吗？我自己改了一下，总是不尽如人意

你去下载一个treeview控件不就行了 

解决方案 »

  1.   

    你去下载一个treeview控件不就行了 
    -------------------------------------这个只能在ie中使用，不太好
      

  2.   

    <HTML>
    <HEAD>
    <TITLE>树菜单</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkSelect(){
    var elm = event.srcElement;
    // 增加的代码开始
    try{
    if (elm.parentElement.children[1].style.display=="none"){
    elm.parentElement.children[1].style.display="";
    }else{
    elm.parentElement.children[1].style.display="none";
    }
    }catch (e){}
    // 增加的代码结束
    checkChildrenRecurve(elm);
    checkRootRecurve(document.getElementById("root"));
    }
    function checkChildrenRecurve(elm){
    var li = elm.parentNode;
    var ul = li.lastChild;
    if (ul.tagName != "UL") return;
    var lis = ul.children;
    for (var i=0;i<lis.length;i++){
    lis[i].firstChild.checked=elm.checked;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkRootRecurve(ul){
    if (ul.tagName != "UL") {
    ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
    ul.parentNode.firstChild.allUnChecked = !ul.parentNode.firstChild.checked;
    return;
    }
    var lis = ul.children;
    var allChecked = true;
    var allUnChecked = true;
    for (var i=0;i<lis.length;i++){
    checkRootRecurve(lis[i].lastChild)
    allChecked = allChecked && lis[i].firstChild.checked && lis[i].firstChild.allChecked;
    allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
    }
    ul.parentNode.firstChild.allChecked=allChecked;
    ul.parentNode.firstChild.allUnChecked=allUnChecked;
    if (allChecked || allUnChecked){
    ul.parentNode.firstChild.checked=allChecked;
    ul.parentNode.firstChild.indeterminate=false;
    }else{
    ul.parentNode.firstChild.indeterminate=true;
    ul.parentNode.firstChild.checked=true;
    }
    }function init(){
    var elms = document.getElementsByTagName("INPUT");
    for (var i=0;i<elms.length;i++)
    elms[i].onclick=checkSelect;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onload="init()">
    <div>
    <input type=checkbox>
    <UL id=root>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    </UL>
    </div>
    </BODY>
    </HTML>
      

  3.   

    <HTML>
    <HEAD>
    <TITLE>树菜单</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkSelect(){
    var elm = event.srcElement;
    checkChildrenRecurve(elm);
    checkRootRecurve(document.getElementById("root"));
    }
    function checkChildrenRecurve(elm){
    var li = elm.parentNode;
    var ul = li.lastChild;
    if (ul.tagName != "UL") return;
    var lis = ul.children;
    for (var i=0;i<lis.length;i++){
    lis[i].firstChild.checked=elm.checked;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkRootRecurve(ul){
    if (ul.tagName != "UL") {
    ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
    ul.parentNode.firstChild.allUnChecked = !ul.parentNode.firstChild.checked;
    return;
    }
    var lis = ul.children;
    var allChecked = true;
    var allUnChecked = true;
    for (var i=0;i<lis.length;i++){
    checkRootRecurve(lis[i].lastChild)
    allChecked = allChecked && lis[i].firstChild.checked && lis[i].firstChild.allChecked;
    allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
    }
    ul.parentNode.firstChild.allChecked=allChecked;
    ul.parentNode.firstChild.allUnChecked=allUnChecked;
    if (allChecked || allUnChecked){
    ul.parentNode.firstChild.checked=allChecked;
    ul.parentNode.firstChild.indeterminate=false;
    }else{
    ul.parentNode.firstChild.indeterminate=true;
    ul.parentNode.firstChild.checked=true;
    }
    }function init(){
    var elms = document.getElementsByTagName("INPUT");
    for (var i=0;i<elms.length;i++){
    elms[i].onclick=checkSelect;
    elms[i].onclick=checkSelect;
    // 双击事件触发折叠模式
    elms[i].ondblclick=changeStyle;
    // 右键事件触发折叠模式
    elms[i].oncontextmenu=changeStyle;
    }
    }
    function changeStyle(){
    var elm = event.srcElement;
    try{
    if (elm.parentElement.children[1].style.display=="none"){
    elm.parentElement.children[1].style.display="";
    }else{
    elm.parentElement.children[1].style.display="none";
    }
    }catch (e){}
    return false;
    }
    //-->
    </SCRIPT></HEAD><BODY onload="init()">
    <div>
    <input type=checkbox>
    <UL id=root LANGUAGE=javascript ondblclick="return root_ondblclick()" oncontextmenu="return root_oncontextmenu()">
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    </UL>
    </div>
    </BODY>
    </HTML>
      

  4.   

    <HTML>
    <HEAD>
    <TITLE>树菜单</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkSelect(){
    var elm = event.srcElement;
    // 增加的代码开始
    try{
    if (elm.parentElement.children[1].style.display=="none"){
    elm.parentElement.children[1].style.display="";
    }else{
    elm.parentElement.children[1].style.display="none";
    }
    }catch (e){}
    // 增加的代码结束
    checkChildrenRecurve(elm);
    checkRootRecurve(document.getElementById("root"));
    }
    function checkChildrenRecurve(elm){
    var li = elm.parentNode;
    var ul = li.lastChild;
    if (ul.tagName != "UL") return;
    var lis = ul.children;
    for (var i=0;i<lis.length;i++){
    lis[i].firstChild.checked=elm.checked;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkRootRecurve(ul){
    if (ul.tagName != "UL") {
    ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
    ul.parentNode.firstChild.allUnChecked = !ul.parentNode.firstChild.checked;
    return;
    }
    var lis = ul.children;
    var allChecked = true;
    var allUnChecked = true;
    for (var i=0;i<lis.length;i++){
    checkRootRecurve(lis[i].lastChild)
    allChecked = allChecked && lis[i].firstChild.checked && lis[i].firstChild.allChecked;
    allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
    }
    ul.parentNode.firstChild.allChecked=allChecked;
    ul.parentNode.firstChild.allUnChecked=allUnChecked;
    if (allChecked || allUnChecked){
    ul.parentNode.firstChild.checked=allChecked;
    ul.parentNode.firstChild.indeterminate=false;
    }else{
    ul.parentNode.firstChild.indeterminate=true;
    ul.parentNode.firstChild.checked=true;
    }
    }function init(){
    var j=0;
    var elms = document.getElementsByTagName("INPUT");
    for (var i=0;i<elms.length;i++){
    elms[i].onclick=checkSelect;
    for (j=1;j<elms[i].parentElement.children.length;j++){
    elms[i].parentElement.children[j].style.display="none";
    }
    }
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onload="init()">
    <div>
    <input type=checkbox>
    <UL id=root>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    </UL>
    </div>
    </BODY>
    </HTML>