垂直手风琴下拉菜单效果

运用技术：jquery

现在很多手机app和一些网站中都会用到这种垂直手风琴下拉菜单，这样做能更好的利用空间，布局更加合理，尤其在移动开发中用到很多

代码展示：

html部分

<body>
    <div style="position: absolute;z-index: 10;margin-top: 150px;margin-left: 80px;">
			<div class="box">
				<div class="Collapsing  current"><img src="images/轿厢装潢/标准轿厢0001.png"></div>
				<div class="coll_body">
					<img src="images/轿厢装潢/观光.png">
					<img src="images/轿厢装潢/非观光.png">
				</div>
				<div class="Collapsing"><img src="images/轿厢装潢/L豪华轿厢0001.png"></div>
				<div class="coll_body">
					<img src="images/轿厢装潢/中式.png">
					<img src="images/轿厢装潢/欧式.png">
					<img src="images/轿厢装潢/现代.png">
					<img src="images/轿厢装潢/现代不锈钢.png">
				</div>
				<div class="Collapsing" style="background-image: none;"><img src="images/轿厢装潢/吊顶0001.png"></div>
				<div class="coll_body">

				</div>
				<div class="Collapsing" style="background-image: none;"><img src="images/轿厢装潢/COP装饰0001.png"></div>
				<div class="coll_body">

				</div>
				<div class="Collapsing" style="background-image: none;"><img src="images/轿厢装潢/扶手0001.png"></div>
				<div class="coll_body">

				</div>
				<div class="Collapsing"><img src="images/轿厢装潢/地板0001.png"></div>
				<div class="coll_body">
					<a href="#"><img src="images/轿厢装潢/非观光.png"></a>
					<a href="#"><img src="images/轿厢装潢/观光.png"></a>
				</div>
			</div>
		</div>
	</body>

css部分

/*垂直手风琴下来菜单样式*/


 .box {
 	width: 200px;
 	height: auto;
 }
 
 .Collapsing {
 	width: 100%;
    margin-top: 30px; 
    background-image: url(../images/轿厢装潢/标准轿厢_right.png);
 }
 
 .coll_body {
 	display: none;
 }
 
 .coll_body img {
 	/*display: block;*/
    margin: 0px;
 	margin-left: 35px;
 }
 
 .current {
   background-image: url(../images/轿厢装潢/标准轿厢_down.png);
 }

js 部分

// 垂直手风琴特效
$(function(){
    $(".coll_body").eq(0).show();
    $(".Collapsing").click(function(){
        $(this).toggleClass("current").siblings('.Collapsing').removeClass("current");//切换图标
        $(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
    });

代码解析：主要讲解js 部分 本案例是运用jquery做的，所以js首先用 $(function(){.....})它是$ (document).ready(function(){...})的简写形式,这样做是为了防止文档未加载完成而运行jquery导致操作失败。

$(".coll_body").eq(0).show();

将所有的.coll_body 类的第一个元素展示；当点击.Collapsing 元素时，调用toggleClass()，对设置或移除被选元素的.current和.collapsing类进行切换。同时调用.sibings 对.coll_body的显示和隐藏的动画。

jquery垂直手风琴下拉菜单效果

垂直手风琴下拉菜单效果

运用技术：jquery

代码展示：