垂直菜单显示收缩特效–移动端浏览器版
并且实现去除点击事件300ms的阴影效果
css
代码语言：javascript复制html { height: 100%; width: 100%; font-size: 100px; outline: 0;}
body { height: 100%; margin: 0; position: relative;background: #efeff4;}
.ui-header h1{font-size: 20px;text-align: center;color: #3b3c40;margin-top: 30px;margin-bottom: 25px;}
.menu_list{width:100%;margin:0 auto;}
.menu_head{height:60px;line-height:60px;padding-left:20px;font-size:16px;font-weight: normal;color:#333;border:none;border-bottom:1px solid #e1e1e1;outline: none;position:relative;margin:0px;background:#ffffff url(moreAddress.png) center right 21px no-repeat;background-size: 14px;}
.menu_list .current{background:#ffffff url(moreAddress-up.png) center right 21px no-repeat;background-size: 14px;outline: none;}
.menu_body{line-height: 20px;display: none;font-size: 14px;background: #efeff4;margin: 15px 20px;color: #3b3c40;outline: none;}
.menu_body p:first-child{padding-top: 5px;}
.menu_body p:last-child{padding-bottom: 5px;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<title></title>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
$(function(){
$("#firstpane .menu_head:eq(0)").addClass("current");
$("#firstpane .menu_body:eq(0)").show();
/*
$("#firstpane .menu_head").click(function(event){
event.stopPropagation();
$(this).addClass("current").next("div.menu_body").toggle().siblings("div.menu_body").hide();
$(this).siblings().removeClass("current");
var display = $(this).next(".menu_body").css("display");
if(display == "none"){
$(this).removeClass("current");
}else if(display == "block"){
$(this).addClass("current");
}
});
*/
$("#firstpane .menu_head").on("singleTap",function(e){
if(!$(e.target).hasClass("btn")){
event.stopPropagation();
$(this).addClass("current").next("div.menu_body").toggle().siblings("div.menu_body").hide();
$(this).siblings().removeClass("current");
var display = $(this).next(".menu_body").css("display");
if(display == "none"){
$(this).removeClass("current");
}else if(display == "block"){
$(this).addClass("current");
}
}
});
});
</script>
</head>
<body>
<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<h1 class="ui-title" role="heading" aria-level="1">常见问题</h1>
</div>
<div id="firstpane" class="menu_list">
<div class="menu_head" data-shadow="false" data-corners="false">1、开通海外资产交易账户</div>
<div class="menu_body">
<p>费费费费费费费费费费费费费费费费费费费费费费费费费费费费费费费费费费费</p>
</div>
<div class="menu_head" data-shadow="false" data-corners="false">2、关于支付注资（入金）</div>
<div class="menu_body">
<p>将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将将</p>
</div>
</div>
</body>
</html>
