Hoe OM - Ineenvou
Leer hoe om 'n opvoubare afdeling te skep.
Opvoubaar
Klik die knoppie om te wissel tussen wys en versteek van die opvoubare inhoud.
Sommige opvoubare inhoud. Klik die knoppie om te wissel tussen wys en versteek van die opvoubare inhoud. Die pyn self is belangrik, maar die pyn word versterk deur die adipiscerende proses, maar ek gee dit tyd om dit af te sny sodat ek goeie werk en pyn kan doen. Vir die doel om tot 'n minimum te kom, wie van ons behoort enige diens te beoefen behalwe om voordeel te trek uit die gevolge daarvan.
Skep 'n opvoubare
Stap 1) Voeg HTML by:
Voorbeeld
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Stap 2) Voeg CSS by:
Stileer die trekklavier:
Voorbeeld
/* Style the button that is used to open and close the
collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the
collapsible content. Note:
hidden by default */
.content {
padding: 0 18px;
display:
none;
overflow: hidden;
background-color: #f1f1f1;
}
Stap 3) Voeg JavaScript by:
Voorbeeld
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click",
function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display
=== "block") {
content.style.display =
"none";
} else {
content.style.display = "block";
}
});
}
Geanimeerde opvoubaar (gly af)
Om 'n geanimeerde opvoubaar te maak, voeg max-height: 0
, overflow: hidden
en 'n transition
vir die maksimum-hoogte-eienskap, by die panel
klas.
Gebruik dan JavaScript om die inhoud af te gly deur 'n berekende in te stel
max-height
, afhangende van die paneel se hoogte op verskillende skermgroottes:
Voorbeeld
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var
coll =
document.getElementsByClassName("collapsible");
var i;
for (i = 0; i <
coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight =
content.scrollHeight + "px";
}
});
}
</script>
Voeg ikone by
Voeg 'n simbool by elke knoppie om aan te dui of die opvoubare inhoud oop of toe is:
Voorbeeld
.collapsible:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}