Kuhakika kama: maelezo ya foldi

Mafanya kuhakika kama unapata sehemu yenye foldi.

Tabia ya kufunguka

Nukurika gundakazi hii ili kuangalia na kufichuka kwa maudhui ya kufunguka.

Maudhui ya kufunguka. Nukurika gundakazi ili kuangalia na kufichuka kwa maudhui ya kufunguka. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

亲自试一试

Kumekadiri tabia ya kufunguka na kufichuka

Tathmini ya tatu - Ongeza HTML:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Tathmini ya tano - Ongeza CSS:

Ongeza tabia ya handuuri:

/* Muhesabu ya kufanya tabia ya mifungo ya kufunguka na kufichuka kwa maudhui ya kufunguka */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Kwa kumtaarifu, na kama mwenye kina hiki kimepaa kwenye gundakazi, ongeza rangi ya mbili ya mbili (kutumia JS kuingia na .active class) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Muhesabu ya kufanya tabia ya maudhui ya kufunguka. Tizame: Inahifadhiwa kwenye ukurasa wa kufichwa kwa ujumbe */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Tathmini ya tatu - Ongeza JavaScript:

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";
    }
  });
}

亲自试一试

带动画的折叠效果（向下滑动）

要创建一个带动画的折叠效果，请将 max-height: 0、overflow: hide 以及 max-height 属性的过渡添加到面板类中。

然后，使用 JavaScript 通过设置计算出的 max-height Tumia mawasiliano ya kusubiri na kusoma maudhui, inadaiwa kwa kilele la pana la kina kwa sababu ya ukubwa wa kina kwenye kipimo cha kina:

Mfano

<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>

亲自试一试

Ongeza ikoni

Ongeza alama kwa kila gusa ili kuonyesha kwamba maudhui ya kufungua ni kufungua au kufichwa:

Mfano

.collapsible:after {
  content: '\02795'; /* Inaa kifaa "plus" (\u002B) kwa Unicode */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* Inaa kifaa "minus" (\u2212) kwa Unicode */
}

亲自试一试