純css折疊區域-基于checkbox

KoreyLee 發布于2019-04-23 11:44 / 2908人閱讀

摘要：即可折疊區域，和標簽類似，不過更靈活些。折疊區域往常多用實現，這里就純粹用，就想法上也是異途同歸。

Accordion

Accordion即可折疊區域，和

標簽類似，不過更靈活些。折疊區域往常多用JavaScript實現，這里就純粹用CSS，就想法上也是異途同歸。

折疊區域重在折疊兩字，既然要折疊，必然要有能記錄下當前折疊狀態的元素存在，思來想去恰好就是這樣的元素，正好兩個值，并且還可以互相切換，可以符合要求。如此說來，既然有了input，也能很自然地想到了，label可以根據for來指向特定的input元素從而無需親自點擊它就可以修改它的狀態，之后根據其狀態checked來標志需要顯示折疊區域，否則隱藏折疊區域。

實現的方法也不難，先設置.according-body的max-height為0，然后在checkbox為checked的狀態下設置其max-height為一個足夠大的值就好，如下：

.accordion-body{
  padding-left: $unit-2;
  margin-bottom: $layout-spacing;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}

input:checked ~,
  &[open]{
    & .accordion-body{
      max-height: 100rem;
    }
  }

注意到這里指定的是max-height而非height，因為我們實際上并不知道折疊區域的高度，既然不知道高度，為何還需要特別指定一個max-height便是一個小技巧了。仔細再看一下.according-body的transition屬性，它是可以根據max-height來實現過渡效果的，這樣便實現了簡單的動畫，雖然看上去折疊的內容不能高于100rem是一個bug，但實際上很少會遇到需要折疊這么一大塊區域的情況，因此并非什么大問題。

Accordion的大體結構這樣便可以了，另外就是一些輔助性的效果，比方說折疊動作的時候顯示區域旁邊的小圖標可以轉一下之類的，利用transform便可以很輕易做到：

input:checked ~,
&[open]{
  & .accordion-header{
    .icon{
      transform: rotate(90deg)
    }
  }
}

.accordion-header{
  cursor: pointer;
  display: block;
  padding: $unit-1 $unit-2;
  .icon{
    transition: transform 0.25s;
  }
}

如此一來Accordion也就完成了，不過考慮也可以在details標簽中添加該類，所以需要將summary標簽自帶的小標志取消掉，如下：

summary.accordion-header{
  &::-webkit-details-marker{
    display: none !important;
  }
}

Accordion的使用便只需要添加相應的類和input就好，如下：




  
古都

  
    ...

?點擊此查看樣例

GPU云服務器云服務器純CSS CheckBox 表單checkbox 模擬checkbox

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1089.html

如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

I_Am 2019-08-02 16:05 評論0 收藏0
如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

waltr 2019-08-29 16:43 評論0 收藏0
純CSS實現扁平化風格開關按鈕

摘要：開關樣式預覽圖前言最近在基于框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇某一選項，本來想引用框架自帶的一個按鈕插件，結果在引用的時候總是出錯，就找了找資源，用純實現這個按鈕開關的功能。開關樣式預覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇...

nanfeiyan 2019-08-29 10:57 評論0 收藏0
純CSS實現扁平化風格開關按鈕

摘要：開關樣式預覽圖前言最近在基于框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇某一選項，本來想引用框架自帶的一個按鈕插件，結果在引用的時候總是出錯，就找了找資源，用純實現這個按鈕開關的功能。開關樣式預覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇...

lewinlee 2019-08-19 18:45 評論0 收藏0
純CSS實現扁平化風格開關按鈕

摘要：開關樣式預覽圖前言最近在基于框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇某一選項，本來想引用框架自帶的一個按鈕插件，結果在引用的時候總是出錯，就找了找資源，用純實現這個按鈕開關的功能。開關樣式預覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇...

lidashuang 2019-08-01 15:26 評論0 收藏0