div模态窗口中的树形菜单问题

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【goodadd】截止到2008-07-05 23:44:23的历史汇总数据(不包括此帖)：
发帖的总数量:2                        发帖的总分数:120                      
结贴的总数量:2                        结贴的总分数:120                      
无满意结贴数:0                        无满意结贴分:0                        
未结的帖子数:0                        未结的总分数:0                        
结贴的百分比:100.00%               结分的百分比:100.00%                  
无满意结贴率:0.00  %               无满意结分率:0.00  %                  
敬礼!

解决方案 »

  1.   

    生成层的时候在生成树 生成树的时候在给树的节点设置onclick事件菜单不能展开和收缩，不用层能正常展开和收缩 估计是控件的Object对象没取对
      

  2.   

    将代码与大家分享；东西本来就来源于网络，本该还与网络。不过这种树只适合节点少的情况。后面我准备用
    JSONArray方式从新写一个支持多结点的，到时候再和大家分享。
    （代码功能，这是一个分类树，通过点击节点将分类名和编号传递回来）
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <title>test</title>
            <style type="text/css">
                <!--
                body {
                    background-color: #C4CDD9;
                }
                body,td,th {
                    font-size: 12px;
                }
                #containerul, #containerul ul{
                    text-align:left;
                    margin:0;
                    padding:0;
                }
                
                #containerul li{
                    margin:0 0 0 30px;
                    padding:0;
                    list-style-type:none;
                }
                
                #containerul .symbols{
                    float:left;
                    width:12px;
                    height:1em;
                    background-position:0 50%;
                    background-repeat:no-repeat;
                }
                .modalDiv{
                    width:311px;
                    height:274px;
                }
                .modalheader{
                    margin:2px;
                    padding:2px;
                }
                .header{
                    margin:0;
                    padding:0;
                }
                .mleft{
                    width:280px;
                    float:left;
                }
                .mright{
                    float:right;
                }
                .modalbody{
                    margin:10px;
                    padding:2px;
                    color:blue;
                }
                -->
            </style>
            <SCRIPT LANGUAGE="JavaScript">
                <!--
    var temp, temp2, cookieArray, cookieArray2, cookieCount;function initiate(){
        
        cookieCount=0;
        
        if(document.cookie){
            
            cookieArray=document.cookie.split(";");
            cookieArray2=new Array();
            
            for(i in cookieArray){
                cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
            }
            
        }
        
        cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
        
        temp=document.getElementById("containerul");
        
        for(var o=0;o<temp.getElementsByTagName("li").length;o++){
            
            if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
                
                temp2 = document.createElement("span");
                temp2.className = "symbols";
                temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(images/minus.png)":"url(images/plus.png)"):"url(images/plus.png)";
                temp2.onclick=function(){
                    showhide(this.parentNode);
                    writeCookie();
                }
                
                temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
                
                temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
                
                if(cookieArray[cookieCount]=="true"){
                    showhide(temp.getElementsByTagName("li")[o]);
                }
                
                cookieCount++;
                
            }
            else{
                
                temp2 = document.createElement("span");
                temp2.className = "symbols";
                temp2.style.backgroundImage = "url(images/page.png)";
                
                temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
                
            }
            
        }
        
    }function showhide(el){
        
        el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
        
        el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(images/minus.png)":"url(images/plus.png)";
        
    }function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
        
        cookieArray=new Array()
        
        for(var q=0;q<temp.getElementsByTagName("li").length;q++){
            
            if(temp.getElementsByTagName("li")[q].childNodes.length>0){
                if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
                    
                    cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
                    
                }
            }
            
        }
        
        document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
        
    }
                                        function ShowModal(dname,id,jd)
                {
                    var showDiv=document.getElementById(dname+'Text');
                    var objDiv=document.getElementById('objText');
                    var disable=document.getElementById('disableDiv');
                    var leibie=document.getElementById('lb');
                    var leibieID=document.getElementById('lbID');
                    if(showDiv.style.display=='none'
                    {
                        showDiv.style.display='block';
                        disable.style.display='block';
                        showDiv.innerHTML=objDiv.innerHTML;
                        initiate();
                    }else{
                        showDiv.style.display='none';
                        disable.style.display='none';
                        leibie.value=jd;
                        leibieID.value=id.toString();
                    }
                }
                //-->
            </SCRIPT>   
        </head>
        
        <body>
            <input type="text" name=leibie id="lb" value="点击选择分类" onClick="ShowModal('show');">
            <input type="text" name=leibieID id="lbID">
            <div id="showText" class="modalDiv" style="position:absolute;left:300px; top:10px;z-index:2;display:none;">
            </div>
            <div id="disableDiv" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-
                 color:#ffffee; border: 0px none #000000; FILTER:alpha(opacity=50);display:none;">
            </div>
            <div id="objText" style="display:none;">
                
                <ul id="containerul">
                    
                    <li id="li">
                        所有分类
                        <ul id="ul">
                            <!-- 自定义标签 -->
                            <li id="li"><a href="javascript:ShowModal('show',73,'设备资源');">设备资源</a><ul id="ul">
                                    <li id="li"><a href="javascript:ShowModal('show',74,'机械设备');">机械设备</a><ul id="ul">
                                            
                                    </ul></li>
                            </ul></li>
                            <li id="li"><a href="javascript:ShowModal('show',75,'软件资源');">软件资源</a><ul id="ul">
                            </ul></li>
                            <li id="li"><a href="javascript:ShowModal('show',76,'科技信息');">科技信息</a><ul id="ul">
                                    <li id="li"><a href="javascript:ShowModal('show',77,'科技信息');">科技信息1</a><ul id="ul">
                                            <li id="li"><a href="javascript:ShowModal('show',78,'科技信息2');">科技信息2</a><ul id="ul">
                                            </ul></li>
                                    </ul></li>
                            </ul></li>
                        </ul>
                    </li>                       
                </ul>
            </div>
        </body>
    </html>