垂直菜单特效--移动端

White feathe

发布于 2021-12-08 14:23:47

8380

发布于 2021-12-08 14:23:47

文章被收录于专栏：White feathe 的博客

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

并且实现去除点击事件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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/03/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css