సృష్టించడం ఎలా: కించిపోవచ్చు ప్రభావం

మీరు కించిపోవచ్చు భాగాలను సృష్టించడానికి తెలుసుకోండి.

可折叠效果

单击该按钮可在显示和隐藏可折叠内容之间切换。

Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. 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.

亲自试一试

创建可折叠部分效果

第一步 - 添加 HTML：




  
Lorem ipsum...

第二步 - 添加 CSS：

设置手风琴样式：

/* 设置用于打开和关闭可折叠内容的按钮的样式 */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* 当按钮被点击时，以及当您将鼠标移到按钮上时（悬停），为按钮添加背景颜色（使用 JS 添加 .active 类） */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* 设置可折叠内容的样式。注意：默认隐藏 */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

మూడవ దశ - జావాస్క్రిప్ట్ జోడించండి:

వారు coll = document.getElementsByClassName("collapsible");
వారు i;
ఫర్ (ఐ = 0; ఐ < coll.length; ఐ++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    వారు content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } లేకపోతే {
      content.style.display = "block";
    }
  });
}

亲自试一试

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

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

然后，使用 JavaScript 通过设置计算出的 max-height సిరిహద్దులో డౌన్ స్లైడ్ కంటెంట్ ప్రక్రియ నిర్దేశిస్తుంది ప్యానెల్ వివిధ స్క్రీన్ పరిమాణాలపై నిర్దేశించబడుతుంది:

ప్రామాణికం

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
వారు coll = document.getElementsByClassName("collapsible");
వారు i;
ఫర్ (ఐ = 0; ఐ < coll.length; ఐ++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    వారు content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } లేకపోతే {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

亲自试一试

ప్రతీకను జోడించండి

ప్రతి బటన్నుకు ప్రతీకను జోడించండి ద్వారా కళ్ళించబడుతున్న కంటెంట్ ఆప్ లేదా క్లోజ్ అవుతుంది సూచిస్తుంది:

ప్రామాణికం

.collapsible:after {
  content: '\02795'; /* కలపడం నిర్దేశిస్తుంది (+) యూనికోడ్ అక్షరం */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* సింహాకరణం నిర్దేశిస్తుంది (-) యూనికోడ్ అక్షరం */
}

亲自试一试