HTML CSS Js - 可折叠树，打开时显示折叠-PHP中文网问答

我使用此处的示例 https://codepen.io/ac_coding/pen/wMmKgb 来创建可折叠菜单，但是我希望菜单在打开时完全折叠。

我尝试对 Javascript 添加一些更改，例如

$('toggleClass').click()

但到目前为止我还没有运气。

Javascript 很难理解，因为我对它还很陌生。

任何有关我如何确保页面打开且所有选项均折叠的帮助将不胜感激。

提前非常感谢。

/*
    THIS CODE WILL HELP (IT'S NECESSARY) TO CREATE THE "FLOWCHART VIEW" STYLE
    ON THE LIST WITH "FLOWCHART" STYLE SELECTED.
*/
$(document).ready(function(){

    // THIS FUNCTION ALLOW IE TO DEAL WITH "GET ELEMENTS BY CLASS NAME"
    function getElementsByClassName(node, classname) {
        var a = [];
        var re = new RegExp('(^| )'+classname+'( |$)');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i"+ finalParagraph +"");
                    }else if($(tempParagraph).parent().parent().prop("class") === 'flowchart'){
                        $(tempParagraph).append(""+ finalParagraph +"");
                    }else{
                        $(tempParagraph).append(""+ finalParagraph +"");
                    }
                }else // IT WILL HAVE FOLDED MENU ICON IF THERE IS CHILDS
                {
                    $(tempParagraph).text('');
                    if(collapseOption =="collapse"){
                        $(tempParagraph).append("
"+ finalParagraph +"");
                    }else{
                        $(tempParagraph).append("
"+ finalParagraph +"");
                    }
                }
            };
            
            // WITH THE NEXT CLASSES WE WILL ADD A LINE AT LEFT SIDE IN CASE THERE IS MORE SECTIONS IN THE SAME LEVEL
            var list = tempFlowchart.getElementsByTagName('ul');
            for(var i = 0; i < list.length; i++){
                var temp = list[i];
                if($(temp).next('li').text() != ''){
                    // LONGER WILL ADD THE LINE
                   $(temp).addClass('longer');
                }else{
                    // SHORT WON'T ADD THE LINE
                    $(temp).addClass('short');
                }
            }
            
                // CREATE A NEW DIV WITH A CLASS CALLED "FLOWCHART"
            $(tempFlowchart).before("");
                // SAVE THE CONTENT OF OUR NEW DIV
            var flowChartDiv = $('div.flowchartSerial_'+ (m+1));
            $(flowChartDiv).append($(tempFlowchart));
            
            // IF 'COLLAPSE' WAS WRITTEN AT THE BEGINNIG OF THE FLOWCHART, IT WILL BE COLLAPSED
            if(collapseOption == "collapse"){
                $(flowChartDiv).children('ul').children('ul').addClass('opened');
                $(flowChartDiv).children('ul').children('ul').slideToggle(350);
                $(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("clicked");
                $(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("notclicked");
                flowchartSlideTest(flowChartDiv);
            // OTHERWISE, IT WILL BE NO COLLAPSED
            }else{
                // THE CLASSES LONGER AND SHORT HAVE A DISPLAY:NONE PROPERTY
                // SO THIS WILL OVERWRITE THAT PROPERTIES AND WILL EXPAND ALL
                $(flowChartDiv).find('.longer').show();
                $(flowChartDiv).find('.short').show();
            }
        }
    }
});

function flowchartSlideTest(variable){

$(variable).find('.menuBox').click(function(event){
    var div = $(this).parent('li').next('ul');
    
    if($(div).html() != undefined){
        var open = $(variable).children('ul').children('ul').find('.opened');
        // IF WE OPENED ANOTHER SECTION BEFORE, IT WILL BE CLOSED BEFORE OPENING THE NEW ONE
        if($(open).html() != $(div).html()){
            if(!$(this).parent().parent().hasClass('opened')){
                $(open).each(function() {
                $(this).toggleClass("opened");
                $(this).slideToggle(350);
                $(this).prev('li').children().children().toggleClass("clicked");
                $(this).prev('li').children().children().toggleClass("notclicked");
            });
            }
        }
        
        $(div).each(function(i) {
            $(div).slideToggle(350);
            $(div).toggleClass("opened");
        });
        
        $(this).children().toggleClass("clicked");
        $(this).children().toggleClass("notclicked");
    };

$(variable).children('ul').children('ul').removeClass('opened');
});
};

.flowchart{width: 500px;margin:0 auto 15px;}
.flowchart .longer{
/*  border-left:1px solid #C5C5C5; */
    padding-left: 15%;
    margin-left: -15px /*!important*/;
    display:none;
}
.flowchart .short{
    padding-left: 15%;
    margin-left: -15px /*!important*/;
    display:none;
}
.flowchart p, .flowchart a, .flowchart li, .flowchart span{color:#fff !important;*color:#000;text-align:left;text-decoration: none;text-decoration: none !important;border-bottom:none !important;}
.flowchart ul{list-style:none;margin: 0;padding: 0;}
.flowchart ul li{margin-top: 10px;}
.flowchart ul li p{margin:0;padding: 5px;padding-left: 30px;background: #f47321;}
.flowchart ul li ul li p{background: #A8B2BB;}
.flowchart ul ul{margin-left: 70px;}
.flowchart ul ul li{
    border-left:1px solid #C5C5C5;
    margin: 0 0 0 -15px;
    padding: 8px 0 0 15px;
}
.flowchart ul ul li:after{
    content: "-";
    color: #fff;
    float: left;
    margin-left: -16px;
    margin-top: -21px;
    border-left: 1px solid #C5C5C5;
    border-bottom: 1px solid #C5C5C5;
    padding-right: 10px;
}
.flowchart ul ul li p{background:#7686c2;}
.flowchart ul ul ul{margin-left: 15%;}
.flowchart .short ul ul ul ul ul ul ul ul, .flowchart .longer ul ul ul ul ul ul ul ul{padding-left: 40px;}

/** COMPARE LATER WITH MENUBOX OF SIDENAV **/
.flowchart .menuBox{
cursor: pointer;
width: 18px;
float: left;
height: 22px;
margin-left: 6px; /* IE8 and below */
margin-top:3px\9;
}
.flowchart .unfoldArrow{
    width: 18px;
    float: left;
    height: 22px;
    margin-left: 6px;
    background: url(/images/sidebarMenu/downMenu-arrow-white.gif) no-repeat 9px 4px;
}
.flowchart .finalLink{
background-image: url(/images/sidebarMenu/menu-arrow-white.gif);
background-repeat: no-repeat;
background-position:9px 4px;
}
.flowchart .firstLevel{
background-color:#f47321;
}
.flowchart .secondLevel{
background-color:#7686c2;
}
.flowchart .thirstLevel{
background-color:#98a2d2;
}
.flowchart span {
margin-top: -2px;
display: list-item;
-webkit-box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
    
background:url(/images/sidebarMenu/menu_icon_for_IE.gif) no-repeat\9; /* IE8 and below */
margin-top: 3px\9; /* IE8 and below */
height:16px\9; /* IE8 and below */
}
.flowchart .clicked{
    margin-left: 9px;
    width: 1px;
    -webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    
    margin-left: 8px\9; /* IE8 and below */
    width: 4px\9; /* IE8 and below */
}
.flowchart .notclicked{
    width: 16px;
    -webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    
    width:20px\9; /* IE8 and below */
    height:16px\9; /* IE8 and below */
}



*collapse*Element 01 (level 01)

Child 01 of Element 01 (level 02)

Element 02 (level 01)

Child 01 of Element 02 (level 02)

Child of Element 02 (level 03)

Child of Element 02 (level 04)


Child 02 of Element 02 (level 02)

Element 03 (level 01)