Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
body {
	font-family:'微软雅黑';
	font-size:14px;
	color:#333;
}
a {
	text-decoration:none;
	color:inherit;
}
#subnav {
	width:200px;
	margin:0 auto
}
#subnav h2 {
	border-bottom:1px solid #000;
	padding:0 5px;
	background-color:#1a6cb9;
	line-height:46px;
	font-size:16px;
	cursor:pointer;
	color:#fff;
	text-align:center;
}
#subnav h2.active {
	background-color:#0f4679;
}
#subnav ul {
	display:none;
	padding:10px;
	background-color:#0f4679;
	color:#fff;
	text-align:center;
}
#subnav li {
	line-height:40px;
}

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

jQuery手风琴菜单效果

demo非常的简单不懂的可以提问

0