垂直菜单特效--移动端

垂直菜单显示收缩特效–移动端浏览器版

垂直菜单特效--移动端_第1张图片

并且实现去除点击事件300ms的阴影效果

css

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>

你可能感兴趣的:(垂直菜单特效--移动端)