精美手风琴效果

手风琴的拉伸效果能演奏出美妙音乐，在页面上，手风琴效果也可以带来不同的视觉效果。

效果展示：

下面介绍两种实现同样的手风琴效果的方式,分别使用纯css和js，css相结合的方法.算是各有优劣：

首先介绍纯css方法实现手风琴效果:

一.布局:

纯css实现手风琴效果的主要思想就是利用input标签,将点击事件与input标签的单选效果结合起来.当input标签被勾选之后与该标签相邻的兄弟标签触发特定的css样式,而没有选中的标签的兄弟标签则恢复默认样式.因此布局中的input标签需要放在最上面.以便操作其相邻的标签.

二.css样式:

1.

ul使用弹性盒模型,在主轴上的子元素采用space-between的排列方式,可以方便地代替浮动.

2.

li相对定位,flex设为auto,自适应父级的宽度.li下的两个input标签绝对定位,默认隐藏(因为只需要他的单选效果),上面的input默认层级比下面的input标签层级高.当上面的选中时,使下面的层级比上面的高,以便取消上面的input的勾选效果.

3.

Container为一个空的div标签,用来撑开li的宽度,默认宽度设为(ul宽度-撑开后高度)/(li数量-1);content标签绝对定位,放到li中间,并设置没有渐变效果的渐变,content下的name也是定位到content的中间.

4.

Content下的describe标签定位到content的合适位置,默认隐藏.

5.

然后设置选中的效果.

这样纯css的手风琴效果就实现了.

css+js手风琴效果:

一.还是布局:

布局跟纯css的差不多,但是少了两个input标签跟一个用来撑开li的container标签.所以总的来说用js实现手风琴效果要比纯css简便一点.

二.css样式:

1.其他的样式都与纯css一样,下面列出与纯css不一样的部分:

需要改变样式的li标签起一个on 的类名,然后给类名为on的li标签下需要改变样式的标签设置样式.

三.Js

通过循环,给每一个li设置一个置为该li序号的自定义属性,

当鼠标点击时判断一下,如果点击的标签跟上一个是不一样的,那么我们将上一个点击的标签的on 类名移除然后给点击的标签加on类名;

如果点击的是同一个标签,那么我们需要给li加on类名(如果本来没有),或者去掉on类名(如果本来没有),这就需要用到toggle来实现(即”有则改之,无则加勉”).

最后，手风琴的效果就这样呈现出来啦，希望大家喜欢，有好的建议希望您多多提出。