移动端h5分类帅选菜单效果-html代码-BFW代码库

代码语言：html

代码描述：移动端h5分类帅选菜单效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
   <style>
       @charset "UTF-8";html{font-size:4vw;height:100vh}*{margin:0;padding:0;outline:none}*:not(input,textarea){-webkit- -callout:inherit;-webkit-user-select:auto}body{font-family:arial,微软雅黑,宋体;font-size:1rem;color:#333;-webkit- -callout:inherit;-webkit-user-select:auto;margin:auto;height:100vh}a{color:#54d09e;text-decoration:none;-webkit-tap-highlight-color:transparent}a:hover{text-decoration:none}button,input,select,textarea{font-size:100%;margin:0;padding:0;outline:none}textarea,input{resize:none;outline:none}textarea{resize:none;-webkit-appearance:none}ul,ol,li{list-style:none}em{font-style:normal}input[type=button]{-webkit-appearance:none;outline:none}h1,h2,h3,h4,h5,h6{font-weight:400}b{font-weight:400}.clear{clear:both;font-size:0;line-height:0;height:0}.topmenu{width:100%}.topmenu dt{width:33.3%;float:left}.selectlist{width:100%;height:auto;box-sizing:border-box}.select_textdiv{height:3rem;width:100%;line-height:3rem;text-align:center;border-bottom:2px solid #b3b3b3;position:relative;border-left:2px solid -webkit-linear-gradient(red,blue)}.select_textul{width:100%;line-height:3rem;box-sizing:border-box;display:none;width:980px;max-height:20rem;overflow-y:scroll}.select_first_ul{width:100%;position:absolute;box-sizing:border-box;left:0}.select_first_ul>li{padding:0 .5rem;box-sizing:border-box}.select_first_ul>li>p{width:50%;padding:0 1rem;box-sizing:border-box;border-bottom:1px #b1b1b1 solid}.focus>p{border-bottom:1px #ff9800 solid!important;color:#ff9800}.select_second_ul{width:50%;position:absolute;right:0;top:0;background:#fff;display:none;box-sizing:border-box;padding-left:.5rem}.down{position:absolute;top:0;right:.5rem;display:inline-block;width:1rem;height:100%}.down img{width:1rem;margin-top:1rem}.divfocus::after{position:absolute;bottom:0;left:46%;border-bottom:.5rem solid #ff9800;border-left:.5rem solid transparent;border-right:.5rem solid transparent;content:""}.focusli{background:#ffc107;color:#fff}.select_second_ul>li{padding:0 .5rem;box-sizing:border-box;border-bottom:1px solid #eaeaea}
   </style>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        $(function() {
            var v_width = $(document.body).width(); $(".select_textul").width(v_width); $(".select_textdiv").click(function() {
                $(this).parent().parent().siblings().find(".select_textul").hide(); $(".select_textdiv").removeClass("divfocus"); $(this).addClass("divfocus"); $(this).siblings(".select_textul").fadeToggle(500); var lilength = $(this).siblings(".select_textul").find("li.focus").has(".select_second_ul").length; if (lilength > 0) {
                    $(this).siblings(".select_textul").find("li.focus>.select_second_ul").show();
                } else {
                    $(".select_first_ul>li>p").css("width", "100%");
                }})
            $(".select_first_ul>li>p").click(function() {
                $(".select_second_ul").hide(); $(this).parent("li").addClass("focus").siblings("li").removeClass("focus"); var ynul = $(this).parent("li").has(".select_second_ul").length; if (ynul == 0) {
                    var choose = $(this).text(); $(this).parents(".select_textul").siblings(".select_textdiv").find(".s_text").text(choose); $(this).parents(".select_textul").siblings("input").val(choose); $(this).parents(".select_textul").fadeOut(300);
                } else {
                    $(".select_second_ul").hide(); $(this).siblings(".select_second_ul").show(); event.stopPropagation(); chooseclick();
                }}); chooseclick(); function chooseclick() {
                $(".select_second_ul>li").click(function() {
                    var choose = $(this).text(); $(this).addClass("focusli").siblings("li").removeClass("focusli"); $(this).parents(".select_textul").siblings(".select_textdiv").find(".s_text").text(choose); $(this).parents(".select_textul").siblings("input").val(choose); $(this).parents(".select_textul").fadeOut(300); event.stopPropagation();
                });
            }})
    </script>
</head>
<body>
    <dl class="topmenu">
        <dt>
            <div class="selectlist">
                <div class="select_textdiv">
                    <input type="hidden" value="" />
                    <p class="s_text">
                        附近
                    </p>
                    <span class="down"><img src="http://repo.bfw.wiki/bfwrepo/icon/5eb4949404188.png"></span>
                </div>
                <div class="select_textul">
                    <ul class="select_first_ul">
                        <li class="focus">
                            <p>
                                附近
                            </p>
                            <ul class="select_second_ul" style="display: block;">
                                <li>附近(智能范围)</li>
                                <li>500</li>
                                <li>1000</li>
                                <li>1500</li>
                                <li>2000</li>
                            </ul>
                        </li>
                        <li>
                            <p>
                                热门商城
                            </p>
                            <ul class="select_second_ul">
                                <li>全部商城</li>
                                <li>市中心区</li>
                                <li>华侨城</li>
                                <li>海岸城</li>
                                <li>蛇口</li>
                            </ul>
                        </li>
                        <li>
                            <p>
                                福田区
                            </p>
                            <ul class="select_second_ul">
                                <li>全部南山区</li>
                                <li>华侨城</li>
                                <li>蛇口</li>
                        .........完整代码请登录后点击上方下载按钮下载查看