¿Cómo mantener el menú expandido después de hacer clic en algunos enlaces? No permanece expandido después de hacer clic en un subenlace. Cuando hago clic en algún enlace, se vuelve a cargar y el menú se cierra de nuevo. Este es mi intento estable hasta ahora https://jsfiddle.net/yoongi/tq028mj4/3/ .
function setChecked(check_id) { event.preventDefault(); let checkbox = document.getElementById(check_id); checkbox.checked = !checkbox.checked; } function showSection(check_id, section_id) { let checkbox = document.getElementById(check_id) let section = document.getElementById(section_id); if (checkbox.checked) { section.style['opacity'] = 1; section.style['display'] = 'block'; } else { section.style['opacity'] = 0; section.style['display'] = 'none'; } } .item-section { .display-itens { label { cursor: pointer; color: unset; text-indent: unset; margin-bottom: unset; } #isexpanded3 { display: none; } } ul { display: none; position: relative; li a{ font-weight: unset; margin-left: 0.8em; } li:hover { background-color: #c4c4c4; } } #isexpanded3:checked + label > i { transform: rotate(180deg); } } } <li class="item-section"> <div style="display:flex;" onclick="showSection('isexpanded3', 'itens-options-list');"> <div class="display-itens"> <input type="checkbox" id="isexpanded3"/> <label for="isexpanded3"><i style="margin-left: unset;" class="fa fa-chevron-down"></i></label> </div> <a href="" onclick="setChecked('isexpanded3')">items</a> </div> <ul id="itens-options-list"> <li><a href="link-item1">item1</a></li> <li><a href="link-item2">item2</a></li> </ul> </li>