html5怎么产生手风琴效果,html5 – 如何使用CSS3制作手风琴菜单？

有几种方法可以做到！例如以下内容.

HTML看起来像这样.有一个div,你单击,下面的div将展开.这只能通过伪选择器：target实现.

Heading 1

Content

Heading 2

Content

​

.accordion h3 + div {

height: 0;

overflow: hidden;

-webkit-transition: height 0.3s ease-in;

-moz-transition: height 0.3s ease-in;

-o-transition: height 0.3s ease-in;

-ms-transition: height 0.3s ease-in;

transition: height 0.3s ease-in;

}

.accordion :target h3 + div {

height: 100px;

}

.accordion .section.large:target h3 + div {

overflow: auto;

}

我为你做了一个工作小提琴.看看吧：Check me out!