无限联动导航，类似地址的联动

来源：互联网发布：淘宝订单号查询商品编辑：程序博客网时间：2024/06/06 01:39
，直接上代码吧，代码太乱功能有就好，后需改正。。。
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>    <title></title>    <meta charset="utf-8" />    <style>        #gggg ul {            display: none;        }        .hhf_select {            background-image: url(/img/aaa.png);            background-repeat: no-repeat;            background-position: left center;        }            .hhf_select.active {                background-image: url(/img/bbb.png);            }        select{            display: block;        }        #bbbb > div{            width: 100%;            margin-top: 10px;        }        #bbbb > div > span{            width: 120px;            margin-right: 20px;            background: gray;        }        .navWrap .navIcon{            width: 14px;            height: 14px;            display: inline-block;            background: #fff;            margin: 5px 10px 0 0;        }    </style></head><body>    <div id="bbbb" class="navWrap"></div>    <script>        (function ($) {            $.fn.AddSelect = function (opation) {                var _arg = $.extend({                    data: ""                    , id: "a"                    , name: "b"                  , link: "c"                }, opation);                var _this1 = this;                var data = JSON.parse(_arg.data);                renderNav();                function renderNav(){                    var _html = '<div>'; //初级设置                    for (var i = 0; i < data.length; i++) {                        var img = ""+(data[i].img ?"<i class='navIcon' style='background: url("+data[i].img+") no-repeat center'></i>": "");                        console.log(img);                            _html += "<span data-level='"                        +data[0].level                        +"' data-index='"+i+                        "'   data-datas='"                        +JSON.stringify(data[i][_arg.link])+"'>"                        + img                            + data[i].n                            +"</span>";                    }                    _html += "</div>";                    $(_this1).append(_html);                }            }        })(jQuery)        var _json = [   {       "v": "1",       "n": "这里是多级",       "level":1,       "img": "localStorage.png",       "s": [           {           "v": "3",           "n": "第二级",           "level":2,           "s": [               {                   "v": "8",                   "n": "第三级",                   "level":3,                   "s": [                       {                           "v": "9",                           "n": "有一分耕耘",                           "level":4                       }                   ]               }           ]       },           {               "v": "4",               "n": "新闻一级1",               "level":2,               "s": [                   {                       "v": "10",                       "n": "55",                       "level":3,                       "s": [                           {                               "v": "11",                               "n": "551",                               "level":4,                               "s": [                                   {                                       "v": "13",                                       "n": "321",                                       "level":5                                   }                               ]                           }                       ]                   }               ]           },           {               "v": "5",               "n": "动态一",               "level":2           }       ]   },   {       "v": "2",       "n": "文章",       "level":1,       "img": "localStorage.png",       "s": [           {               "v": "7",               "level":2,               "n": "6666"           }       ]   },   {       "v": "6",       "level":1,       "img": "localStorage.png",       "n": "哈哈哈"   },   {       "v": "12",       "level":1,       "n": "12"   }        ];        $("#bbbb").AddSelect({            data: JSON.stringify(_json)            , id: "v"            , name: "n"            , link: "s"        });        $("#bbbb").AddSelect({            data: JSON.stringify(_json)            , id: "v"            , name: "n"            , link: "s"        });        $("#bbbb").click(function(e){            var ele = e.target || e.srcElement;//          ele.dataset.datas ||   IE低版本不兼容dataset属性统一换getAttribute（）            newData = ele.getAttribute("data-datas");            var navWrap = $(this);            if(e.target.id == "bbbb"){                newData =JSON.stringify(_json);                return;            }            if(newData == "undefined" || !newData){                removeSubNav();                return            }            removeSubNav();            function removeSubNav() {                var targetParentIndex = $(e.target).parent().index();                navWrap.children().each(function (idx, e) {                    if(idx > targetParentIndex){                        $(this).remove();                    }                });            }            $("#bbbb").AddSelect({                data: newData                , id: "v"                , name: "n"                , link: "s"            });        });    </script></body></html>
阅读全文
0 0