只有展示功能的树

主要是利用 dl dt dd 列表, 还运用的checked的选中事件来控制。这样就可以展现一颗树,或者列表了

html部分

    
一级目录
二级目录
三级目录
三级目录
三级目录
三级目录
二级目录
二级目录
二级目录
二级目录

js部分

        $("#wrapper>dl").children("dd").hide();
        $("#first").click(function(){
            if (this.checked) {

                $("dd").show();
                for(var i=0;i<$("input").length;i++){                                       
                    $("input").eq(i).attr("checked","checked")  ;   
                }
            } else{
                for (var index=0;index<$(".secondDd").length;index++) {
                    $(".secondDd").eq(index).hide();                    
                }
                for(var i=0;i<$("input[name=second]").length;i++){
                    $("input[name=second]").eq(i).prop("checked",false)             
                }
            }
        })
        $("#firstSecond").click(function(){
            if (this.checked) {
                $("#first").prop("checked",true)    
                for (var index=0;index<$(".threet").length;index++) {
                    $(".threet").eq(index).show();                  
                }
                for(var i=0;i<$("input[name=threeth]").length;i++){                                     
                    $("input[name=threeth]").eq(i).attr("checked","checked").parent("dd").show();   
                }
            } else{
                $("#first").prop("checked",false)       
                for(var i=0;i<$("input[name=threeth]").length;i++){
                    $("input[name=threeth]").eq(i).prop("checked",false).parent("dd").hide();               
                }
            }
        })

你可能感兴趣的:(只有展示功能的树)