我使用此处的示例 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<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
// this variable will just check if we are on a template with a flowchart inside.
var flowcharts = getElementsByClassName(document.body,'flowchart'); // no document
// IN CASE THERE IS A FLOWCHART LIST, THE FUN WILL START
if($(flowcharts).html() != undefined){
// FIRSTLY IT'S COUNTED HOW MANY FLOWCHART ARE THERE
for(var m = 0; m < flowcharts.length; m++){
var tempFlowchart = flowcharts[m];
var collapseOption = ''; // THIS VARIABLE WILL BE USED AS A SETTING TO FOLD OR NOT THE FLOWCHART
// UMBRACO RETURN THE TEXT INSIDE "LI" WITHOUT "P", SO WE NEED TO GET ALL OF THEM AND MAKE IT PROPERLY
var paragraphsList = tempFlowchart.getElementsByTagName('li');
for(var i = 0; i < paragraphsList.length; i++){
var tempParagraph = paragraphsList[i];
// NEXT CONDITION WILL LOOK FOR THE SETTING TO FOLD OR UNFOLD THE FLOWCHART
if(collapseOption === ''){
// IF THE WORD COLLAPSE IS IN THE FIRST PARAGRAPH BETWEEN '*' ...
var settingsRemoved = $(tempParagraph).html(),
settings = settingsRemoved.split('*');
// ...WE TAKE IT OUT FROM THE TEXT, AND SAVE IT FOR LATER IN A VARIABLE
collapseOption = settings[1];
// THE ORIGINAL HTML IS OVERWRITTEN WITH THE NEW ONE, WITHOUT "COLLAPSE" ON IT
$(tempParagraph).html(settings[2]);
}
// THIS FUNCTION WILL CUT OUT ANY TEXT BETWEEN [ AND ], AND IT WILL BE ADDED AS "TITLE" TO THE PARAGRAPH
var html = $(tempParagraph).html(),
lText = html.split('['),
rText = html.split(']');
if (typeof rText[0] === "undefined")
{rText[0] = ""}
if (typeof rText[1] === "undefined")
{rText[1] = ""}
if (typeof lText[0] === "undefined")
{lText[0] = ""}
if (typeof lText[1] === "undefined")
{lText[1] = ""}
var titleText = lText[1].split(']');
$(tempParagraph).attr({ title: titleText[0] });
$(tempParagraph).html(lText[0]+rText[1]);
var finalParagraph = $(tempParagraph).html();
// IF THERE IS NOT CHILDS, IN WON'T HAVE FOLDED MENU ICON
if($(tempParagraph).next('ul').text() == ''){
$(tempParagraph).text('');
if($(tempParagraph).parent().prop("class") === 'flowchart'){
$(tempParagraph).append("<p class='finalLink firstLevel'>"+ finalParagraph +"</p>");
}else if($(tempParagraph).parent().parent().prop("class") === 'flowchart'){
$(tempParagraph).append("<p class='finalLink secondLevel'>"+ finalParagraph +"</p>");
}else{
$(tempParagraph).append("<p class='finalLink thirstLevel'>"+ finalParagraph +"</p>");
}
}else // IT WILL HAVE FOLDED MENU ICON IF THERE IS CHILDS
{
$(tempParagraph).text('');
if(collapseOption =="collapse"){
$(tempParagraph).append("<div class='menuBox'><span class='notclicked'></span></div><p>"+ finalParagraph +"</p>");
}else{
$(tempParagraph).append("<div class='unfoldArrow'></div><p>"+ finalParagraph +"</p>");
}
}
};
// 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("<div class='flowchart flowchartSerial_" + (m+1) + "'></div>");
// 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 */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="flowchart">
<li>*collapse*Element 01 (level 01)</li>
<ul>
<li>Child 01 of Element 01 (level 02)</li>
</ul>
<li>Element 02 (level 01)</li>
<ul>
<li>Child 01 of Element 02 (level 02)</li>
<ul>
<li>Child of Element 02 (level 03)</li>
<ul>
<li>Child of Element 02 (level 04)</li>
</ul>
</ul>
<li>Child 02 of Element 02 (level 02)</li>
</ul>
<li>Element 03 (level 01)</li>
</ul>
您需要使用检查器来获取正确的选择器
$('ul.longer .menuBox').trigger("click");