-1

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>

1
  • Pesquise por event.preventDefault().
    – Sam
    Commented 20/09/2021 às 18:33

1 Resposta 1

0

oque você ta tentando fazer é alterar um comportamento padrão de um evento , digo para dar uma olhada na função :

event.preventDefault()

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .