Html
    Css
    Js
.accordion {
	width:50%;
	max-width:260px;
	margin:30px auto 20px;
	background:#FF6347;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.accordion .link {
	cursor:pointer;
	display:block;
	padding:15px 15px 15px 42px;
	color:black;
	font-size:14px;
	font-weight:700;
	border-bottom:1px solid #CCC;
	position:relative;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.accordion li:last-child .link {
	border-bottom:0;
}
.accordion li i {
	position:absolute;
	top:16px;
	left:12px;
	font-size:18px;
	color:#595959;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.accordion li i.fa-chevron-down {
	right:12px;
	left:auto;
	font-size:16px;
}
.accordion li.open .link {
	color:white;
}
.accordion li.open i {
	color:#b63b4d;
}
.accordion li.open i.fa-chevron-down {
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}
/**
 * Submenu
 -----------------------------*/
 .submenu {
	display:none;
	background:#87CEEB;
	font-size:14px;
}
.submenu li {
	border-bottom:1px solid #4b4a5e;
}
.submenu a {
	display:block;
	text-decoration:none;
	color:black;
	padding:12px;
	padding-left:42px;
	-webkit-transition:all 0.25s ease;
	-o-transition:all 0.25s ease;
	transition:all 0.25s ease;
}
.submenu a:hover {
	background:black;
	color:white;

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

jQuery垂直手风琴下拉菜单

1
      lbug0
      2018/8/1 18:06:22
      动态菜单要把on改成live 回复