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

最新推荐文章于 2019-08-15 17:19:40 发布

freshing123

最新推荐文章于 2019-08-15 17:19:40 发布

阅读量435

点赞数

分类专栏： js 文章标签：导航

本文链接：https://blog.csdn.net/freshing123/article/details/73477936

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

，直接上代码吧，代码太乱功能有就好，后需改正。。。

<!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>

freshing123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限联动导航，类似地址的联动

，直接上代码吧，代码太乱功能有就好，后需改正。。。<!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"></scri
复制链接

扫一扫