jQuery仿淘宝商品发布三级联动菜单特效代码下载


jQuery仿淘宝商品发布三级联动菜单特效代码下载
jQuery仿淘宝商品发布三级联动菜单特效代码下载以及三级联动菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

    <div class="select-res">
        <span>请选择您主营的品类名称(多选)</span>
    </div>
    <div class="select-box">
        <span class="close-btn">
            <img src="images/close_btn.jpg" />
        </span>
        <div class="wrap">
            <ul class="first"></ul>
            <ul class="second"></ul>
            <ul class="third"></ul>
        </div>
    </div>
    <script>
    var dataJson = {
        "option": [{
            "id": "1",
            "name": "户外玩具\/设施",
            "child": [{
                "id": "4",
                "name": "平衡木",
                "child": [{
                    "id": "12",
                    "name": "塑制平衡木"
                }, {
                    "id": "13",
                    "name": "木质平衡木"
                }, {
                    "id": "14",
                    "name": "独木桥"
                }, {
                    "id": "15",
                    "name": "平衡步道"
                }]
            }, {
                "id": "5",
                "name": "滑梯",
                "child": [{
                    "id": "35",
                    "name": "组合滑梯"
                }, {
                    "id": "36",
                    "name": "直筒滑梯"
                }, {
                    "id": "37",
                    "name": "旋转滑梯"
                }, {
                    "id": "38",
                    "name": "双排滑梯"
                }, {
                    "id": "39",
                    "name": "单排滑梯"
                }, {
                    "id": "41",
                    "name": "多功能滑梯"
                }, {
                    "id": "42",
                    "name": "木质滑梯"
                }]
            }, {
                "id": "6",
                "name": "蹦床",
                "child": [{
                    "id": "58",
                    "name": "护网蹦床"
                }, {
                    "id": "59",
                    "name": "折叠蹦床"
                }, {
                    "id": "60",
                    "name": "弹跳床"
                }, {
                    "id": "61",
                    "name": "城堡蹦床"
                }]
            }, {
                "id": "7",
                "name": "跷跷板",
                "child": [{
                    "id": "74",
                    "name": "双人跷跷板"
                }, {
                    "id": "75",
                    "name": "单人跷跷板"
                }, {
                    "id": "76",
                    "name": "摇马"
                }, {
                    "id": "77",
                    "name": "室外跷跷板"
                }, {
                    "id": "78",
                    "name": "弹簧跷跷板"
                }, {
                    "id": "79",
                    "name": "摇摇乐"
                }]
            }, {
                "id": "8",
                "name": "荡船",
                "child": [{
                    "id": "90",
                    "name": "彩棚荡船"
                }, {
                    "id": "91",
                    "name": "公鸡荡船"
                }, {
                    "id": "92",
                    "name": "秋千"
                }, {
                    "id": "93",
                    "name": "吊椅"
                }, {
                    "id": "94",
                    "name": "摇椅"
                }, {
                    "id": "95",
                    "name": "荡桥"
                }]
            }, {
                "id": "9",
                "name": "攀岩",
                "child": [{
                    "id": "107",
                    "name": "塑料攀岩"
                }, {
                    "id": "108",
                    "name": "爬山坡"
                }, {
                    "id": "109",
                    "name": "木质攀岩"
                }, {
                    "id": "110",
                    "name": "保险带"
                }, {
                    "id": "111",
                    "name": "攀岩石"
                }, {
                    "id": "112",
                    "name": "安全绳"
                }, {
                    "id": "113",
                    "name": "拖鞋儿童帐篷"
                }, {
                    "id": "114",
                    "name": "爬网攀岩架"
                }, {
                    "id": "115",
                    "name": "攀岩鞋"
                }, {
                    "id": "116",
                    "name": "充气攀岩"
                }]
            }, {
                "id": "10",
                "name": "淘气堡",
                "child": [{
                    "id": "119",
                    "name": "淘气堡玩具"
                }, {
                    "id": "120",
                    "name": "淘气堡配件"
                }, {
                    "id": "121",
                    "name": "充气城堡"
                }, {
                    "id": "122",
                    "name": "小型淘气堡"
                }]
            }, {
                "id": "11",
                "name": "其他玩具",
                "child": [{
                    "id": "137",
                    "name": "隧道"
                }, {
                    "id": "138",
                    "name": "钻洞"
                }, {
                    "id": "139",
                    "name": "轨道火车"
                }, {
                    "id": "140",
                    "name": "围栏"
                }, {
                    "id": "141",
                    "name": "垃圾桶"
                }, {
                    "id": "142",
                    "name": "滚筒"
                }, {
                    "id": "143",
                    "name": "木制设施"
                }]
            }]
        }, {
            "id": "2",
            "name": "室内玩具",
            "child": [{
                "id": "151",
                "name": "亲子玩具",
                "child": [{
                    "id": "156",
                    "name": "儿童健身器材"
                }, {
                    "id": "157",
                    "name": "高跷"
                }, {
                    "id": "158",
                    "name": "玩具球"
                }, {
                    "id": "159",
                    "name": "跨栏"
                }, {
                    "id": "160",
                    "name": "跳跳袋"
                }, {
                    "id": "161",
                    "name": "体能器材"
                }]
            }, {
                "id": "152",
                "name": "海洋球类",
                "child": [{
                    "id": "162",
                    "name": "海洋球帐篷"
                }, {
                    "id": "163",
                    "name": "澳乐海洋球"
                }, {
                    "id": "164",
                    "name": "儿童帐篷"
                }, {
                    "id": "165",
                    "name": "海洋球池"
                }, {
                    "id": "1059",
                    "name": "决明子沙池"
                }]
            }, {
                "id": "153",
                "name": "积木",
                "child": [{
                    "id": "166",
                    "name": "拼装积木"
                }, {
                    "id": "167",
                    "name": "星钻积木"
                }, {
                    "id": "168",
                    "name": "木质积木"
                }, {
                    "id": "169",
                    "name": "乐高积木"
                }, {
                    "id": "170",
                    "name": "电子积木"
                }, {
                    "id": "171",
                    "name": "拼图"
                }, {
                    "id": "172",
                    "name": "塑料积木"
                }, {
                    "id": "173",
                    "name": "启蒙积木"
                }, {
                    "id": "1060",
                    "name": "邦宝积木"
                }, {
                    "id": "1061",
                    "name": "LOZ积木"
                }, {
                    "id": "1062",
                    "name": "数字积木"
                }]
            }, {
                "id": "154",
                "name": "转椅",
                "child": [{
                    "id": "174",
                    "name": "三座转椅"
                }, {
                    "id": "175",
                    "name": "四座转椅"
                }, {
                    "id": "176",
                    "name": "六座转椅"
                }, {
                    "id": "177",
                    "name": "八座转椅"
                }, {
                    "id": "178",
                    "name": "十二座转椅"
                }, {
                    "id": "179",
                    "name": "蘑菇转椅"
                }, {
                    "id": "180",
                    "name": "旋转木马"
                }]
            }, {
                "id": "155",
                "name": "软体玩具",
                "child": [{
                    "id": "184",
                    "name": "软体积木"
                }, {
                    "id": "185",
                    "name": "软体长椅"
                }, {
                    "id": "186",
                    "name": "毛绒玩具"
                }]
            }, {
                "id": "1057",
                "name": "教学玩具",
                "child": [{
                    "id": "1063",
                    "name": "益智玩具"
                }, {
                    "id": "1064",
                    "name": "感官玩具"
                }, {
                    "id": "1065",
                    "name": "数学玩具"
                }, {
                    "id": "1066",
                    "name": "手眼协调"
                }, {
                    "id": "1067",
                    "name": "拼图玩具"
                }, {
                    "id": "1068",
                    "name": "其他玩具"
                }]
            }, {
                "id": "1058",
                "name": "区角器材",
                "child": [{
                    "id": "1069",
                    "name": "娃娃家"
                }, {
                    "id": "1070",
                    "name": "超市"
                }, {
                    "id": "1071",
                    "name": "医院"
                }, {
                    "id": "1072",
                    "name": "交通"
                }, {
                    "id": "1073",
                    "name": "邮局"
                }, {
                    "id": "1074",
                    "name": "厨房"
                }, {
                    "id": "1075",
                    "name": "创意区角"
                }]
            }]
        }, {
            "id": "3",
            "name": "教材\/教具",
            "child": [{
                "id": "200",
                "name": "五大领域",
                "child": [{
                    "id": "206",
                    "name": "小班教材书"
                }, {
                    "id": "207",
                    "name": "中班教材书"
                }, {
                    "id": "208",
                    "name": "大班教材书"
                }, {
                    "id": "209",
                    "name": "成套教材书"
                }]
            }, {
                "id": "201",
                "name": "蒙氏系列",
                "child": [{
                    "id": "218",
                    "name": "蒙氏教具"
                }, {
                    "id": "219",
                    "name": "蒙氏数学"
                }, {
                    "id": "220",
                    "name": "蒙氏教具套装"
                }, {
                    "id": "221",
                    "name": "图形认知"
                }, {
                    "id": "222",
                    "name": "逻辑狗"
                }, {
                    "id": "223",
                    "name": "色彩认知"
                }, {
                    "id": "224",
                    "name": "感官教具"
                }, {
                    "id": "225",
                    "name": "益智拼图"
                }, {
                    "id": "226",
                    "name": "数学棒"
                }, {
                    "id": "227",
                    "name": "对数板"
                }, {
                    "id": "1078",
                    "name": "早教教具"
                }]
            }, {
                "id": "202",
                "name": "音乐特色",
                "child": [{
                    "id": "228",
                    "name": "音乐教材"
                }, {
                    "id": "229",
                    "name": "打击乐器"
                }, {
                    "id": "230",
                    "name": "手串铃"
                }, {
                    "id": "231",
                    "name": "儿童木鱼"
                }, {
                    "id": "232",
                    "name": "节奏棒"
                }, {
                    "id": "233",
                    "name": "蛙鸣筒"
                }, {
                    "id": "1079",
                    "name": "摇铃鼓"
                }, {
                    "id": "1080",
                    "name": "三角铃"
                }, {
                    "id": "1081",
                    "name": "方巾纱巾"
                }, {
                    "id": "1082",
                    "name": "铜碰钟"
                }, {
                    "id": "1083",
                    "name": "手拍鼓"
                }, {
                    "id": "1084",
                    "name": "舞板响板"
                }, {
                    "id": "1085",
                    "name": "三角铁"
                }, {
                    "id": "1086",
                    "name": "撞钟"
                }, {
                    "id": "1087",
                    "name": "棒铃"
                }, {
                    "id": "1088",
                    "name": "铃鼓"
                }, {
                    "id": "1089",
                    "name": "奥尔夫乐器"
                }, {
                    "id": "1090",
                    "name": "手摇铃"
                }, {
                    "id": "1091",
                    "name": "沙球沙锤"
                }]
            }, {
                "id": "203",
                "name": "美术特色",
                "child": [{
                    "id": "234",
                    "name": "美术教材"
                }, {
                    "id": "235",
                    "name": "美术教具"
                }, {
                    "id": "236",
                    "name": "美术材料"
                }]
            }, {
                "id": "204",
                "name": "舞蹈特色",
                "child": [{
                    "id": "243",
                    "name": "舞蹈教材"
                }, {
                    "id": "244",
                    "name": "道具扇子"
                }, {
                    "id": "245",
                    "name": "道具花"
                }, {
                    "id": "246",
                    "name": "道具手绢"
                }, {
                    "id": "247",
                    "name": "道具花伞"
                }, {
                    "id": "248",
                    "name": "道具服"
                }, {
                    "id": "1092",
                    "name": "道具鞋"
                }, {
                    "id": "1093",
                    "name": "道具裙"
                }]
            }, {
                "id": "205",
                "name": "识字特色",
                "child": [{
                    "id": "249",
                    "name": "识字教材"
                }, {
                    "id": "250",
                    "name": "识字闪卡"
                }, {
                    "id": "251",
                    "name": "识字玩具"
                }, {
                    "id": "252",
                    "name": "识字绘本"
                }]
            }, {
                "id": "1076",
                "name": "生活特色",
                "child": [{
                    "id": "1096",
                    "name": "陶艺教材教具"
                }, {
                    "id": "1097",
                    "name": "烘焙教材教具"
                }]
            }, {
                "id": "1077",
                "name": "辅助器材",
                "child": [{
                    "id": "1094",
                    "name": "黑板"
                }, {
                    "id": "1095",
                    "name": "工作毯"
                }, {
                    "id": "1098",
                    "name": "电子白板"
                }, {
                    "id": "1099",
                    "name": "教学投影仪"
                }, {
                    "id": "1100",
                    "name": "电子白板笔"
                }, {
                    "id": "1101",
                    "name": "电子白板配件"
                }, {
                    "id": "1102",
                    "name": "智能机器人"
                }]
            }]
        }, {
            "id": "256",
            "name": "家具用品",
            "child": [{
                "id": "258",
                "name": "教具架",
                "child": [{
                    "id": "264",
                    "name": "杉木教具架"
                }, {
                    "id": "265",
                    "name": "松木教具架"
                }, {
                    "id": "266",
                    "name": "塑制教具架"
                }, {
                    "id": "267",
                    "name": "教具柜"
                }, {
                    "id": "268",
                    "name": "组合柜"
                }]
            }, {
                "id": "259",
                "name": "收纳柜",
                "child": [{
                    "id": "276",
                    "name": "实木收纳柜"
                }, {
                    "id": "277",
                    "name": "玩具收纳柜"
                }, {
                    "id": "278",
                    "name": "书架"
                }, {
                    "id": "279",
                    "name": "书柜"
                }, {
                    "id": "280",
                    "name": "鞋柜"
                }, {
                    "id": "281",
                    "name": "嵌板架"
                }, {
                    "id": "1103",
                    "name": "衣帽柜"
                }, {
                    "id": "1104",
                    "name": "玩具收纳盒"
                }, {
                    "id": "1105",
                    "name": "工作毯架"
                }]
            }, {
                "id": "260",
                "name": "毛巾架",
                "child": [{
                    "id": "282",
                    "name": "杉木毛巾架"
                }, {
                    "id": "283",
                    "name": "松木毛巾架"
                }, {
                    "id": "284",
                    "name": "不锈钢毛巾架"
                }, {
                    "id": "285",
                    "name": "毛巾口杯架"
                }, {
                    "id": "286",
                    "name": "毛巾架"
                }]
            }, {
                "id": "261",
                "name": "口杯架",
                "child": [{
                    "id": "294",
                    "name": "杉木口杯架"
                }, {
                    "id": "295",
                    "name": "松木口杯架"
                }, {
                    "id": "296",
                    "name": "毛巾口杯架"
                }, {
                    "id": "297",
                    "name": "塑制口杯架"
                }, {
                    "id": "298",
                    "name": "实木口杯架"
                }, {
                    "id": "299",
                    "name": "牙刷架"
                }, {
                    "id": "300",
                    "name": "水杯"
                }]
            }, {
                "id": "390",
                "name": "幼儿床",
                "child": [{
                    "id": "398",
                    "name": "实木幼儿床"
                }, {
                    "id": "399",
                    "name": "单人床"
                }, {
                    "id": "400",
                    "name": "双层床"
                }, {
                    "id": "401",
                    "name": "床护栏"
                }, {
                    "id": "402",
                    "name": "滑梯床"
                }, {
                    "id": "403",
                    "name": "婴儿床"
                }, {
                    "id": "404",
                    "name": "折叠床"
                }, {
                    "id": "405",
                    "name": "塑制床"
                }]
            }, {
                "id": "391",
                "name": "桌子",
                "child": [{
                    "id": "406",
                    "name": "实木桌子"
                }, {
                    "id": "407",
                    "name": "升降桌"
                }, {
                    "id": "408",
                    "name": "松木桌"
                }, {
                    "id": "409",
                    "name": "成套桌椅"
                }, {
                    "id": "410",
                    "name": "塑制桌子"
                }]
            }, {
                "id": "392",
                "name": "椅子",
                "child": [{
                    "id": "419",
                    "name": "塑制椅子"
                }, {
                    "id": "420",
                    "name": "靠背椅"
                }, {
                    "id": "421",
                    "name": "凳子"
                }, {
                    "id": "422",
                    "name": "实木椅子"
                }, {
                    "id": "423",
                    "name": "成套桌椅"
                }, {
                    "id": "424",
                    "name": "软体椅"
                }]
            }, {
                "id": "393",
                "name": "厨房用品",
                "child": [{
                    "id": "435",
                    "name": "冰柜"
                }, {
                    "id": "436",
                    "name": "消毒液"
                }, {
                    "id": "437",
                    "name": "消毒灯"
                }, {
                    "id": "438",
                    "name": "消毒剂"
                }, {
                    "id": "439",
                    "name": "消毒柜"
                }]
            }]
        }, {
            "id": "308",
            "name": "环创装饰",
            "child": [{
                "id": "309",
                "name": "装修材料",
                "child": [{
                    "id": "314",
                    "name": "室内地胶"
                }, {
                    "id": "315",
                    "name": "户外塑胶"
                }, {
                    "id": "316",
                    "name": "儿童漆"
                }, {
                    "id": "317",
                    "name": "灯具"
                }, {
                    "id": "318",
                    "name": "草坪"
                }, {
                    "id": "319",
                    "name": "沙发"
                }, {
                    "id": "320",
                    "name": "墙体彩绘"
                }]
            }, {
                "id": "310",
                "name": "装饰材料",
                "child": [{
                    "id": "326",
                    "name": "装饰材料"
                }]
            }, {
                "id": "311",
                "name": "环创材料",
                "child": [{
                    "id": "341",
                    "name": "环创材料"
                }, {
                    "id": "342",
                    "name": "成品环创"
                }]
            }]
        }, {
            "id": "470",
            "name": "幼儿用品",
            "child": [{
                "id": "471",
                "name": "学习用品",
                "child": [{
                    "id": "478",
                    "name": "水彩笔"
                }, {
                    "id": "479",
                    "name": "本子"
                }, {
                    "id": "480",
                    "name": "油画棒"
                }, {
                    "id": "481",
                    "name": "胶棒"
                }, {
                    "id": "482",
                    "name": "橡皮擦"
                }, {
                    "id": "487",
                    "name": "防晒隔离"
                }, {
                    "id": "1108",
                    "name": "书包"
                }]
            }, {
                "id": "472",
                "name": "生活用品",
                "child": [{
                    "id": "488",
                    "name": "毛巾"
                }, {
                    "id": "489",
                    "name": "水杯"
                }, {
                    "id": "490",
                    "name": "护肤品"
                }, {
                    "id": "491",
                    "name": "餐具"
                }]
            }, {
                "id": "473",
                "name": "园服鞋帽",
                "child": [{
                    "id": "499",
                    "name": "园服"
                }, {
                    "id": "500",
                    "name": "软底鞋"
                }, {
                    "id": "501",
                    "name": "室内拖鞋"
                }, {
                    "id": "1106",
                    "name": "帽子"
                }]
            }, {
                "id": "474",
                "name": "枕\/被褥",
                "child": [{
                    "id": "502",
                    "name": "枕头"
                }, {
                    "id": "503",
                    "name": "被子"
                }, {
                    "id": "504",
                    "name": "褥子"
                }, {
                    "id": "505",
                    "name": "小毛巾被"
                }]
            }]
        }, {
            "id": "530",
            "name": "管理咨询",
            "child": [{
                "id": "531",
                "name": "培训课程",
                "child": [{
                    "id": "541",
                    "name": "园长培训"
                }, {
                    "id": "542",
                    "name": "幼师培训"
                }, {
                    "id": "543",
                    "name": "家长培训"
                }]
            }, {
                "id": "532",
                "name": "管理工具",
                "child": [{
                    "id": "549",
                    "name": "管理软件"
                }, {
                    "id": "550",
                    "name": "管理图书"
                }, {
                    "id": "551",
                    "name": "管理系统"
                }]
            }, {
                "id": "533",
                "name": "指导派遣",
                "child": [{
                    "id": "553",
                    "name": "入园指导服务"
                }, {
                    "id": "554",
                    "name": "外教外派"
                }, {
                    "id": "1107",
                    "name": "体育老师外派"
                }]
            }, {
                "id": "534",
                "name": "咨询设计",
                "child": [{
                    "id": "555",
                    "name": "品牌策划"
                }, {
                    "id": "556",
                    "name": "VI设计"
                }, {
                    "id": "557",
                    "name": "招标设计"
                }, {
                    "id": "558",
                    "name": "园区规划设计"
                }, {
                    "id": "559",
                    "name": "装修设计"
                }]
            }]
        }]
    }
    var l1 = 0,
        l2 = 0;
    var cname1, cname2, cname3;
    var cid1, cid2, cid3;
    var canClick = !0;
    var canClose = !1;
    $('.select-box').css({
        left: $('.select-res').offset().left,
        top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
    });
    $('span', $('.select-res')).on('click', function() {
        $('.select-box').show();
        if (canClick) {
            $('ul', $('.select-box')).html('');
            fillData();
            canClick = !1;
        }
    });
    $('span', $('.select-box')).on("click", function() {
        canClose ? $('.select-box').hide() : alert('请选择下级品类!');
        canClick = !0;
    });
    $('.select-res').on('click', 'a', function() {
        $(this).parent().remove();
        $('.select-box').css({
            top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
        });
    })
    $('ul.first', $('.select-box')).on('click', 'li', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        $('ul.third').html('');
        fillData($(this).index());
        l1 = $(this).index();
        cname1 = $(this).text();
        cid1 = $(this).attr('val');
        canClose = !1;
        $('input.cid', $('.select-res')).val(cid1);
        $('input.cname', $('.select-res')).val(cname1);
    });
    $('ul.second', $('.select-box')).on('click', 'li', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        fillData(l1, $(this).index());
        l2 = $(this).index();
        cname2 = $(this).text();
        cid2 = $(this).attr('val');
        canClose = !1;
        $('input.cid', $('.select-res')).val(cid1 + ',' + cid2);
        $('input.cname', $('.select-res')).val(cname1 + ',' + cname2);
    });
    $('ul.third', $('.select-box')).on('click', 'li', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        cname3 = $(this).text();
        cid3 = $(this).attr('val');
        canClose = !0;
        var hasExist = !1;
        $('.select-res').find("p").each(function() {
            if ($(this).text().split(' > ')[2] == cname3) hasExist = !0;
        })
        hasExist ? alert('所选品类已被添加!') : $('.select-res').append('<p>' + cname1 + ' > ' + cname2 + ' > ' + cname3 + '<a></a><input type="hidden" value="' + cid1 + ',' + cid2 + ',' + cid3 + '" name="cid[]" /><input type="hidden" value="' + cname1 + ',' + cname2 + ',' + cname3 + '" name="cname[]" /></p>');
        $('.select-box').css({
            top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
        });
        $('input.cid', $('.select-res')).val(cid1 + ',' + cid2 + ',' + cid3);
        $('input.cname', $('.select-res')).val(cname1 + ',' + cname2 + ',' + cname3);
    });
    //填充级联数据
    function fillData(l1, l2) {
        var temp_html = "";
        if (typeof(dataJson.option) != 'undefined' && arguments.length == 0) {
            $.each(dataJson.option, function(i, pro) {
                temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
            });
        } else if (typeof(dataJson.option[l1].child) != 'undefined' && arguments.length == 1) {
            $.each(dataJson.option[l1].child, function(i, pro) {
                temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
            });
        } else if (typeof(dataJson.option[l1].child[l2].child) != 'undefined' && arguments.length == 2) {
            $.each(dataJson.option[l1].child[l2].child, function(i, pro) {
                temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
            });
        }
        $('.select-box ul:eq(' + arguments.length + ')').html(temp_html);
    }
    </script>

相关推荐

发表评论

相关文章