CSS Grid实现内容展开收起

2021-12-08443次阅读css模块

CSS Grid实现内容展开收起

<button id="toggle">toggle</button>

<div>Something before</div>

<div class="expander" id="expander">
  <div class="expander-content">
    toggle! 
  </div>
</div>

<div>Something after</div>
.expander {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 1s;
}
.expander-content {
  min-height: 0;
  transition: visibility 1s;
  visibility: hidden;
}
.expander.expanded {
  grid-template-rows: 1fr;
}
.expander.expanded .expander-content {
  visibility: visible;
}
toggle.onclick = () => {
  expander.classList.toggle("expanded");
};

 

上一篇: \u{202E}这个Unicode字符可以反转字符顺序  下一篇: Firefox浏览器原生structuredClone() 方法用于对象的深拷贝  

CSS Grid实现内容展开收起相关文章