展开特定的导航节点onload

Question

我有一个复杂的嵌套列表，用于多个页面使用的侧边栏导航。我需要的是在加载期间在特定节点上扩展侧边栏导航的解决方案。

我在这里发现了许多类似的讨论，但提供的解决方案似乎对我不起作用。请帮助；)。这是我的清单代码：

/**
* Styling sidebar navigation
*/
ol,
ul {
list-style: none
}
/**
* Styling top level items 
*/
.nav a,
.nav label {
display: block;
padding-top: 0.4rem;
padding-right: 0.6rem;
padding-left: 0.6rem;
padding-bottom: 0.4rem;
color: #fff;
background-color: #333;
box-shadow: inset 0 0 #1d1d1d;
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in;
-webkit-box-shadow: inset 0 0 #1d1d1d;
}
.nav a:focus,
.nav a:hover,
.nav label:focus,
.nav label:hover {
color: rgba(255, 255, 255, 0.5);
background: #333;
}
.nav label {
cursor: pointer;
margin-top: 3px
}
/**
* Styling first level lists items
*/
.group-list a,
.group-list label {
padding-left: 1rem;
background: #252525;
box-shadow: inset 0 -1px #373737;
font-family: Roboto;
font-size: 13px;
}
.group-list label {
margin-top: 2px
}
.group-list a:focus,
.group-list a:hover,
.group-list label:focus,
.group-list label:hover {
background: #131313;
}
.group-list item {
display: inherit;
cursor: pointer;
margin-top: 2px;
}
/**
* Styling second level list items
*/
.sub-group-list a,
.sub-group-list label {
padding-left: 1rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
font-family: Roboto;
font-size: 12px;
}
.sub-group-list a:focus,
.sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
background: #232323;
}
/**
* Hide nested lists
*/
.group-list,
.sub-group-list,
.sub-sub-group-list {
height: 100%;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s ease-in-out;
transition: max-height .5s ease-in-out;
font-family: Roboto;
font-size: 12px;
}
.nav__list input[type=checkbox]:checked+label+ul {
/* reset the height when checkbox is checked */
max-height: 1000px;
}

<div id="sidebar-wrapper">
<nav class="nav" role="navigation">
<ul class="nav__list">
<h2>Section 1</h2>
<li>
<input id="group-1" type="checkbox" hidden />
<label for="group-1"><span class="fa fa-angle-right"></span>Group 1</label>
<ul class="group-list">
<li>
<input id="sub-group-1.1" type="checkbox" hidden />
<label for="sub-group-1.1"><span class="fa fa-angle-right"></span>Sub-group 1.1</label>
<ul class="sub-group-list">
<li><a href="#">sub-group item 1.1.1</a></li>
<li><a href="#">sub-group item 1.1.2</a></li>
<li><a href="#">sub-group item 1.1.3</a></li>
</ul>
</li>
<li>
<input id="sub-group-1.2" type="checkbox" hidden />
<label for="sub-group-1.2"><span class="fa fa-angle-right"></span>Sub-group 1.2</label>
<ul class="sub-group-list">
<li><a href="#">sub-group item 1.2.1</a></li>
<li><a href="#">sub-group item 1.2.2</a></li>
<li><a href="#">sub-group item 1.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-2" type="checkbox" hidden />
<label for="group-2"><span class="fa fa-angle-right"></span>Group 2</label>
<ul class="group-list">
<li>
<input id="sub-group-2.1" type="checkbox" hidden />
<label for="sub-group-2.1"><span class="fa fa-angle-right"></span>Sub-group 2.1</label>
<ul class="sub-group-list">
<li><a href="#">sub-group item 2.1.1</a></li>
<li><a href="#">sub-group item 2.1.2</a></li>
</ul>
</li>
</li>
</ul>
<!--End of .nav__list-->
</nav>
<!--End of .navigation-->
</div>

我所期望的是在页面加载期间得到扩展，比如说"子组1.1"。谢谢

Answer 1

菜单的状态依赖于复选框。如果您有后端代码，可以在将HTML发送到客户端之前对其进行检查。否则，您可以在JS:中执行此操作

1. 查找要选中的最深复选框
2. 如果当前元素是一个复选框，或者它有作为直接子项的复选框，请选中它们
3. 上一级
4. 重复步骤2，直到偶然发现包装侧边栏元素

代码

// When the DOM is ready
window.addEventListener('DOMContentLoaded', function() {
openSidebar('sub-group-1.1');
});
function openSidebar(id) {
// Can be useful if you use this function multiple times during the page's life
closeSidebar();
// The highest level we can go up to
var sidebar = document.getElementById('sidebar-wrapper'),
// The deepest checkbox we need to check
target = document.getElementById(id);
// While the target is not the wrapping sidebar
while (target !== sidebar) {
// If the current target is a checkbox, check it
if (target.type === 'checkbox') {
target.checked = true;
} else {
// Otherwise, if it has a direct child that is a checkbox
var checkboxChild = Array.from(target.children).find(function(el) {
return el.matches('input[type="checkbox"]');
});
if (checkboxChild !== undefined) {
checkboxChild.checked = true;
}
}
// Move up one level
target = target.parentNode;
}
}
function closeSidebar() {
var checkboxes = document.querySelectorAll('#sidebar-wrapper input[type="checkbox"]');
Array.from(checkboxes).forEach(function(el) {
el.checked = false;
});
}

/* unchanged CSS *//**  * Styling sidebar navigation  */  ol, ul { list-style: none }  /**  * Styling top level items   */  .nav a, .nav label {     display: block;     padding-top: 0.4rem;     padding-right: 0.6rem;     padding-left: 0.6rem;     padding-bottom: 0.4rem;     color: #fff;     background-color: #333;     box-shadow: inset 0 0 #1d1d1d;     -webkit-transition: all .25s ease-in;     transition: all .25s ease-in;     -webkit-box-shadow: inset 0 0 #1d1d1d; }  .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {     color: rgba(255, 255, 255, 0.5);     background: #333; }  .nav label {     cursor: pointer;      margin-top: 3px }  /**  * Styling first level lists items  */  .group-list a, .group-list label {     padding-left: 1rem;     background: #252525;     box-shadow: inset 0 -1px #373737;     font-family: Roboto;     font-size: 13px; } .group-list label {margin-top: 2px}  .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; }  .group-list item {     display: inherit;     cursor: pointer;      margin-top: 2px; }  /**  * Styling second level list items  */  .sub-group-list a, .sub-group-list label {     padding-left: 1rem;     background: #353535;     box-shadow: inset 0 -1px #474747;     font-family: Roboto;     font-size: 12px; }  .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }    /**  * Hide nested lists  */  .group-list, .sub-group-list, .sub-sub-group-list {     height: 100%;     max-height: 0;     overflow: hidden;     -webkit-transition: max-height .5s ease-in-out;     transition: max-height .5s ease-in-out;     font-family: Roboto;     font-size: 12px; }  .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */ max-height: 1000px; }

<!-- unchanged HTML --><div id="sidebar-wrapper"> <nav class="nav" role="navigation"> <ul class="nav__list"> <h2>Section 1</h2> <li> <input id="group-1" type="checkbox" hidden /> <label for="group-1"><span class="fa fa-angle-right"></span>Group 1</label> <ul class="group-list"> <li> <input id="sub-group-1.1" type="checkbox" hidden /> <label for="sub-group-1.1"><span class="fa fa-angle-right"></span>Sub-group 1.1</label>             <ul class="sub-group-list">             <li><a href="#">sub-group item 1.1.1</a></li>             <li><a href="#">sub-group item 1.1.2</a></li>             <li><a href="#">sub-group item 1.1.3</a></li>             </ul>         </li>         <li>         <input id="sub-group-1.2" type="checkbox" hidden />         <label for="sub-group-1.2"><span class="fa fa-angle-right"></span>Sub-group 1.2</label>             <ul class="sub-group-list">             <li><a href="#">sub-group item 1.2.1</a></li>             <li><a href="#">sub-group item 1.2.2</a></li>             <li><a href="#">sub-group item 1.2.3</a></li>             </ul>         </li>         </ul>     </li>         <li>       <input id="group-2" type="checkbox" hidden />       <label for="group-2"><span class="fa fa-angle-right"></span>Group 2</label>             <ul class="group-list">             <li>             <input id="sub-group-2.1" type="checkbox" hidden />             <label for="sub-group-2.1"><span class="fa fa-angle-right"></span>Sub-group 2.1</label>                 <ul class="sub-group-list">                 <li><a href="#">sub-group item 2.1.1</a></li>                 <li><a href="#">sub-group item 2.1.2</a></li>                 </ul>             </li>     </li>     </ul>     <!--End of .nav__list--> </nav> <!--End of .navigation--> </div>