只有展示功能的树

2023年8月15日 255次阅读 来源: 痛心凉

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

html部分

    <div id="wrapper">  
            <dl>
                <dt><input type="checkbox" name="" id="first" />一级目录</dt>
                <dd>
                    <dl>
                        <dt  class="secondDd"><input type="checkbox" name="second" id="firstSecond" />二级目录</dt>
                        <dd class="threet"><input type="checkbox" name="threeth" id="" />三级目录</dd>
                        <dd class="threet"><input type="checkbox" name="threeth" id="" />三级目录</dd>
                        <dd class="threet"><input type="checkbox" name="threeth" id="" />三级目录</dd>
                        <dd class="threet"><input type="checkbox" name="threeth" id="" />三级目录</dd>
                    </dl>
                </dd>
                <dd class="secondDd"><input type="checkbox" name="second" id="" />二级目录</dd>
                <dd class="secondDd"><input type="checkbox" name="second" id="" />二级目录</dd>
                <dd class="secondDd"><input type="checkbox" name="second" id="" />二级目录</dd>
                <dd class="secondDd"><input type="checkbox" name="second" id="" />二级目录</dd>
            </dl>
        </div>

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();               
                }
            }
        })
    原文作者：痛心凉
    原文地址: https://www.jianshu.com/p/f9bf7256f049
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞