Html
    Css
    Js

    
                        
ul {
	margin:0;
	padding:0;
	list-style:none;
	width:100px;
	height:0;
	overflow:hidden;
	transition:all .2s linear;
	background-color:aquamarine;
}
.open+ul {
	height:60px;
	transition:all .2s linear;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生dom实现手风琴效果

首先写个大的div,将所有的内容都包含进去,在写三个按钮,三个ul,每一个按钮控制一个ul的开关。

我们写好html和css后,开始写js.我是用原生DOM写的。首先大DIV,我是用ID找的,然后通过id找到span元素。因为文中有3个span元素,所以我们要遍历每个span。如果这个span的class是开着的,就让它关掉。然后再下面还有两个span,在继续循环

0