Um simples colapso/expansão persistente com o jquery
Estou a manter um projecto legado e reescrevi esta peça recentemente. Foi originalmente escrito há cerca de uma década. jQuery ainda está disponível no ambiente e nenhuma decisão foi tomada para mover esta peça para Reagir, então vamos usar jQuery.
mais2022-10-04 atualização: Adicionado o detalhe stopPropagation(), caso o seu botão de comutar contenha outros elementos interativos, como botões ou uma barra de pesquisa.
O formalismo que estou usando, herdado de decisões tomadas há uma década, é adicionar a classe .collapse-expand para um ícone, e clicando que iria alternar a visibilidade do próximo elemento DOM.
Sem persistência, a solução é uma linha única do javascript:
$("collapse-expand").clique(function() { $(this).next().slideToggle()}
Com persistência, usaremos o armazenamento local e adicionaremos outro formalismo: a chave armazenando qual elemento está colapsado/expandido, e a palavra-chave para o estado. A palavra-chave que eu uso é "collapsed", e é apenas uma corda neste caso.
(Nota adicional: Eu tenho um formalismo para constanteizar e manter o controle de palavras-chave javascript como este. Ele funciona muito bem, é robusto e não precisa mudar todo o projeto para digitar e eliminar seu pipeline de construção. Se você quiser que eu descreva -- por favor, deixe um comentário, e se as pessoas estiverem interessadas, eu vou postar outro artigo apenas sobre este tópico.)
A chave que guarda a palavra- chave é `collapse-expand#${thisId}`. O elemento DOM com a classe .collapse-expand tem de ter um id, para que cada elemento comutado possa ser acompanhado. Portanto, se o ID for #simpleId, e o elemento dom é .collapse-expand#simpleId, então a chave se torna “collapse-expand#simpleId".
(Nota adicional: se você já pensou em qual convenção de nomeação é mais correta: simpleID ou simpleIdA minha opinião é que simpleId é o correcto. A razão por trás disso é: "id" significa "identificador" e não é uma sigla de duas palavras. A letra “d” em “id” não significa uma palavra separada e, portanto, numa conversão de camelCase para snake_case, “id" não deve se tornar "i_d". É uma palavra, sem letra maiúscula no meio.)
Note também que a estrutura DOM requer que o elemento dobrável seja o próximo, não uma criança. Então esta estrutura está correta:
O conteúdo que eu quero alternar
Contraste- a à incorreta em que a secção de dobragem não é um elemento seguinte:
O conteúdo que eu quero alternar
Por último, precisamos que os elementos persistentes e colapsados sejam colapsados na carga das páginas. Iterar sobre todos os elementos com classe .collapse-expand, e dobrá-los se a persistência diz que eles são dobrados. Além disso, ao clicar, o estado é armazenado persistentemente.
Com isso, aqui está a totalidade do código javascript:
$(".collapse-expand").each( function() {
const thisId = $(this).attr('id')
const state = localStorage.getItem("collapse-expand#"+thisId)
se (estado === 'closped') {
$(this).next().slideToggle();
}
})
$(". colapso- expansão"). click( função () {
const thisId = $(this).attr('id')
const state = localStorage.getItem("collapse-expand#"+thisId)
se (estado === 'closped') {
localStorage.removeItem("collapse-expand#"+thisId)
} outros {
localStorage.setItem("collapse-expand#"+ this Id, "colapsado")
}
$(this).next().slideToggle();
}).children().click( function (e) {
e.stopPropagation()
})
Uma melhoria pode ser mudar o ícone, de colapsado para expandido, do elemento clicável, e o estilo do ponteiro para significar que ele é clicável. Vou deixá-lo como um exercício para o leitor. A ideia básica é adicionar/remover .collapsed .expanded classes (separadas da .collapse-expand classe) e estilo ícone de cada classe separadamente.