HTML CSS Js – Zusammenklappbarer Baum, beim Öffnen wird der Zusammenbruch angezeigt-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich verwende das Beispiel hier https://codepen.io/ac_coding/pen/wMmKgb, um ein reduzierbares Menü zu erstellen, aber ich möchte, dass das Menü beim Öffnen vollständig reduziert wird.

Ich habe versucht, einige Änderungen an Javascript vorzunehmen, wie zum Beispiel

$('toggleClass').click()

Aber bisher habe ich kein Glück.

Javascript ist schwer zu verstehen, weil ich noch so neu darin bin.

Für jede Hilfe, wie ich sicherstellen kann, dass die Seite geöffnet wird und alle Optionen ausgeblendet sind, wäre ich sehr dankbar.

Vielen Dank im Voraus.

/* 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; } .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; /* IE8 and below */ margin-top: 3px; /* IE8 and below */ height:16px; /* 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; /* IE8 and below */ width: 4px; /* 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; /* IE8 and below */ height:16px; /* 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)

/* 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(); } } } // right there $('ul.longer .menuBox').trigger("click"); }); 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)