Eu gostaria de implementar uma ação de expansão e recolhimento usando CSS puro. O HTML se parece com o abaixo, onde podemos ter muitos expand-containerdivs. Os IDs são dinâmicos, então não quero depender de IDs de segmentação. Não consigo alterar o HTML para adicionar caixas de seleção, etc, para manter o estado, pois está vindo de um servidor. Então, gostaria de trabalhar apenas com CSS.
<div class="wikiContentBody">
<div id="expander-1903026289" class="expand-container">
<div id="expander-control-1903026289" class="expand-control">
<span class="expand-control-icon">
<img style="vertical-align:middle;" class="expand-control-image"
src="https://example.com/images/icons/grey_arrow_down.png">
</span>
<span class="expand-control-text">Problem Statement</span>
</div>
<div id="expander-content-1903026289" class="expand-content">
<p>This content should be expandable and collapsible</p>
</div>
</div>
</div>
Aqui está o CSS que tenho até agora:
.expand-control {
cursor: pointer;
}
div.expand-control:active ~ div.expand-content {
display: block;
}
div.expand-content {
display:none;
}
Não tenho certeza se é possível, mas também gostaria de alterar a fonte da imagem expand-control-imagede https://example.com/images/icons/grey_arrow_down.pngpara https://example.com/images/icons/grey_arrow_up.png, quando o painel for expandido.
Se você pode usar javascript ou jQuery, você pode alternar uma classe no elemento pai:
$(".expand-control-icon").on("click", function(){
$(".wikiContentBody").toggleClass("active");
});
Então, em seu CSS, algo assim:
.wikiContentBody.active div.expand-content {
display: block;
}
Quanto a alterar o img src via CSS, o que você pode fazer é tentar envolver o img em uma div com position: relative. Em seguida, adicione um elemento psuedo com position: absolute e defina a imagem de fundo para o url secundário que você forneceu e defina display: none. Assim que o elemento pai tiver a classe de ativo, exiba o pseudo elemento sobre a imagem original:
.expand-control-icon > div {
position: relative;
z-index: 1;
}
.expand-control-icon > div::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("your other url");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: none;
z-index: 2;
}
.wikiContentBody.active .expand-control-icon > div::after {
display: block;
}
Talvez você precise refinar um pouco mais do que isso, mas pode ser um bom ponto de partida.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras