Como manter o menu expandido ao clicar em um link? Ele não fica expandido após eu clicar em algum sublink. Essa é minha tentativa mais estável até o momento https://jsfiddle.net/yoongi/tq028mj4/3/. Quando eu clico, a página faz um reload e o menu fecha novamente.
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>
event.preventDefault()
.