純css的accordion效果

來源:互聯網
上載者:User

類似的例子網上也有,感興趣的同學可以去google,這裡我自己試著去實現一個,其實很簡單,主要是用到了css3中的:target偽類和transition效果.

css中注意下:target和transition部分就大致清楚了.代碼中css的prefix為了簡明只用了-moz-

:target定位的元素對應於瀏覽器url最後的#xxx,xxx是元素的id,我們通過點擊標題連結實現切換功能。

以下是jsfiddle中得實際效果(firefox瀏覽或者修改css首碼)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.