成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純css折疊區(qū)域-基于checkbox

KoreyLee / 2916人閱讀

摘要：即可折疊區(qū)域，和標(biāo)簽類似，不過(guò)更靈活些。折疊區(qū)域往常多用實(shí)現(xiàn)，這里就純粹用，就想法上也是異途同歸。

Accordion

Accordion即可折疊區(qū)域，和

標(biāo)簽類似，不過(guò)更靈活些。折疊區(qū)域往常多用JavaScript實(shí)現(xiàn)，這里就純粹用CSS，就想法上也是異途同歸。

折疊區(qū)域重在折疊兩字，既然要折疊，必然要有能記錄下當(dāng)前折疊狀態(tài)的元素存在，思來(lái)想去恰好就是這樣的元素，正好兩個(gè)值，并且還可以互相切換，可以符合要求。如此說(shuō)來(lái)，既然有了input，也能很自然地想到

實(shí)現(xiàn)的方法也不難，先設(shè)置.according-body的max-height為0，然后在checkbox為checked的狀態(tài)下設(shè)置其max-height為一個(gè)足夠大的值就好，如下：

.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，因?yàn)槲覀儗?shí)際上并不知道折疊區(qū)域的高度，既然不知道高度，為何還需要特別指定一個(gè)max-height便是一個(gè)小技巧了。仔細(xì)再看一下.according-body的transition屬性，它是可以根據(jù)max-height來(lái)實(shí)現(xiàn)過(guò)渡效果的，這樣便實(shí)現(xiàn)了簡(jiǎn)單的動(dòng)畫，雖然看上去折疊的內(nèi)容不能高于100rem是一個(gè)bug，但實(shí)際上很少會(huì)遇到需要折疊這么一大塊區(qū)域的情況，因此并非什么大問(wèn)題。

Accordion的大體結(jié)構(gòu)這樣便可以了，另外就是一些輔助性的效果，比方說(shuō)折疊動(dòng)作的時(shí)候顯示區(qū)域旁邊的小圖標(biāo)可以轉(zhuǎn)一下之類的，利用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;
  }
}

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

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

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






  

    ...

?點(diǎn)擊此查看樣例

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1089.html

相關(guān)文章

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

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

    I_Am 評(píng)論0 收藏0

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

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

    waltr 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)扁平化風(fēng)格開關(guān)按鈕

    摘要：開關(guān)樣式預(yù)覽圖前言最近在基于框架開發(fā)一個(gè)網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇某一選項(xiàng)，本來(lái)想引用框架自帶的一個(gè)按鈕插件，結(jié)果在引用的時(shí)候總是出錯(cuò)，就找了找資源，用純實(shí)現(xiàn)這個(gè)按鈕開關(guān)的功能。 開關(guān)樣式預(yù)覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架開發(fā)一個(gè)網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇...

    nanfeiyan 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)扁平化風(fēng)格開關(guān)按鈕

    摘要：開關(guān)樣式預(yù)覽圖前言最近在基于框架開發(fā)一個(gè)網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇某一選項(xiàng)，本來(lái)想引用框架自帶的一個(gè)按鈕插件，結(jié)果在引用的時(shí)候總是出錯(cuò)，就找了找資源，用純實(shí)現(xiàn)這個(gè)按鈕開關(guān)的功能。 開關(guān)樣式預(yù)覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架開發(fā)一個(gè)網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇...

    lewinlee 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)扁平化風(fēng)格開關(guān)按鈕

    摘要：開關(guān)樣式預(yù)覽圖前言最近在基于框架開發(fā)一個(gè)網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇某一選項(xiàng)，本來(lái)想引用框架自帶的一個(gè)按鈕插件，結(jié)果在引用的時(shí)候總是出錯(cuò)，就找了找資源，用純實(shí)現(xiàn)這個(gè)按鈕開關(guān)的功能。 開關(guān)樣式預(yù)覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架開發(fā)一個(gè)網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇...

    lidashuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<