前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能

迷南。 2022-09-23 05:57 7阅读 0赞

先上DEMO，

虽然丑，那是因为零级按钮的界面太丑了，图标也丑┑(￣Д ￣)┍

这两个优化后会好很多，毕竟美观不是我的特长嘛

![20160706141917691][]

DEMO链接：

http://download.csdn.net/detail/qq20004604/9568685

**（83）二级下拉菜单**

①过程描述：

【1】数据来源：一个数组，具体格式为：

var dataArr = [{text: "测试1", img: "test"},
        {text: "测试2", img: "test"},
        {
            text: "测试3", img: "test", children: [
                {
                    text: "测试", img: "test", children: [
                        {text: "测试", img: "test"},
                        {text: "测试", img: "test"}
                    ]
                },
                {text: "测试", img: "test"}
            ]
        }
    ]

树形结构；

数组每个单元由text（文字）属性和img（图片名）属性；

假如其有下一级下拉菜单，那么将有children属性（如果没有则无）；

因为有两级，所以部分会有两层children属性；

【2】添加形式：

树的最顶层被显式的显示出来，如果其有下拉菜单，则有向下的箭头图标；

一级下拉菜单（第一层children属性里的元素），在点击显式显示的元素后，被显示出来，再次点击任何区域，则隐藏；如果其有下一级下拉菜单，则该行右侧有向右的箭头图标；

二级下拉菜单，在鼠标移动到其父结点时被显示；

效果图如图：

（上面的DEMO图）

②代码：

我已经将其整合在一个html文件里，因此直接贴出来全部的，注意图片路径和html文件路径在一起，dojo和jquery文件在html文件的上级目录。具体请查看代码的引用方式。

由于代码较长，建议自行建立一个html文件，然后将全部代码复制进去后查看。

HTML的dom结构参照最后一部分被注释掉的内容（缺少隐藏的逻辑）；

<html>
    <head>
        <style>
    
            .parentDiv {
                height: 40px;
                background-color: #e8e8e8;
                line-height: 40px;
            }
    
            .parentDiv .data {
                background-color: #b8b8b8;
                color: white;
                height: 26px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                line-height: 26px;
                padding: 0 5px;
                margin-left: 7px;
                display: inline-block;
                position: relative;
                top: 7px;
                cursor: pointer;
            }
    
            .parentDiv .displayNONE {
                display: none;
            }
    
            .parentDiv .data.focus {
                background-color: deepskyblue;
            }
    
            .parentDiv .data span.img {
                display: inline-block;
                width: 25px;
                height: 26px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 16px 16px;
            }
    
            .parentDiv .data span.text {
                display: inline-block;
                height: 26px;
                line-height: 26px;
                vertical-align: top;
                font-size: 13px;
            }
    
            .parentDiv .data span.triangle {
                display: inline-block;
                width: 10px;
                height: 26px;
                background-position: center;
                background-repeat: no-repeat;
                background-image: url("triangle_down.png");
            }
    
            .parentDiv .data .row span.expendlistTriangle {
                display: inline-block;
                width: 20px;
                height: 10px;
                float: right;
                position: relative;
                top: 8px;
                right: -10px;
                background-position: center;
                background-repeat: no-repeat;
                background-image: url("triangle_right.png");
            }
    
            .parentDiv .data .row:hover span.expendlistTriangle {
                background-image: url("triangle_right_hover.png");
            }
    
            .parentDiv .data .list {
                z-index: 25;
                list-style: none;
                position: absolute;
                left: 0;
                width: 200px;
                top: 40px;
                color: #7d7d7d;
                border: 1px solid #b9b9b9;
                background-color: white;
                box-shadow: 0px 2px 1px 1px #ddd;
                border-radius: 10px;
            }
    
            .parentDiv .data .list .before {
                background-image: url("triangle_top.png");
                position: absolute;
                width: 20px;
                height: 10px;
                z-index: 30;
                top: -10px;
                background-size: 20px 10px;
                left: 15px;
            }
    
            .parentDiv .data .expendlist .expendlistbefore {
                background-image: url("triangle_left.png");
                position: absolute;
                width: 10px;
                height: 30px;
                z-index: 30;
                top: 5px;
                background-size: 10px 20px;
                left: -10px;
                background-repeat: no-repeat;
                background-position: center center;
            }
    
            .parentDiv .data .list .row {
                position: relative;
                display: block;
                padding: 0 10px;
            }
    
            .parentDiv .data .list .row .img {
                vertical-align: middle;
            }
    
            .parentDiv .data .list .row:hover {
                color: white;
                background-color: #f37b3f;
            }
    
            .parentDiv .data .list .row .expendlist {
                display: none;
                position: absolute;
                top: -5px;
            }
    
            .parentDiv .data .list .row:hover .expendlist {
                display: inline-block;
            }
    
            .parentDiv .data .list .row .expendlist li {
                padding: 0 5px;
            }
    
            .parentDiv .data .list .row:hover .expendlist li {
                color: #7d7d7d;
            }
    
            .parentDiv .data .list .row:hover .expendlist li:hover {
                color: white;
                background-color: #f37b3f;
            }
    
            .parentDiv .data .list .row:nth-child(2) {
                border-radius: 10px 10px 0 0/10px 10px 0 0;
            }
    
            .parentDiv .data .list .row:last-child {
                border-radius: 0 0 10px 10px/0 0 10px 10px;
            }
    
            .parentDiv .data .expendlist {
                z-index: 25;
                position: absolute;
                left: 105%;
                list-style: none;
                width: 100%;
                border: 1px solid #b9b9b9;
                background-color: white;
                box-shadow: 0px 2px 1px 1px #ddd;
            }
    
        </style>
        <script src="../dojo/dojo.js"></script>
        <script src="../jq.js"></script>
        <script>
            require([
                "dojo/dom-construct",
                "dojo/dom-class",
                "dojo/dom-style",
                "dojo/mouse",
                "dojo/on",
                "dojo/domReady!"
            ], function (domConstruct, domClass, domStyle, mouse, on) {
                var tabArr = [];
                var dataArr = [{text: "测试1", img: "test"},
                    {text: "测试2", img: "test"},
                    {
                        text: "测试3", img: "test", children: [
                        {
                            text: "测试", img: "test", children: [
                            {text: "测试", img: "test"},
                            {text: "测试", img: "test"}
                        ]
                        },
                        {text: "测试", img: "test"}
                    ]
                    }
                ]
                dataArr.forEach(function (item) {
                    tabArr.push(createTab(item));
                })
                domClass.add(tabArr[0], "focus");
                var lastTab;
                lastTab = tabArr[0];
    
                function createTab(obj) {     //创建标签页（就是智能分析那一排）
                    var node = domConstruct.create("div", {
                        class: "data"
                    }, "parentDiv");
                    var img = domConstruct.create("span", {
                        class: "img",
                        style: "background-image:url(" + obj.img + ".png)"
                    }, node);
                    var text = domConstruct.create("span", {
                        class: "text",
                        innerHTML: obj.text
                    }, node);
                    on(node, "click", function () {
                        domClass.remove(lastTab, "focus");
                        domClass.add(node, "focus");
                        lastTab = node;
                    })
                    if (typeof obj.children === "object") { //如果有children属性，说明有下拉菜单，那么创建它
                        var text = domConstruct.create("span", {
                            class: "triangle"
                        }, node);
                        createTabList(node, obj.children);
                    }
                    return node;
                }
    
                function createTabList(node, obj) { //创建一级下拉菜单
                    var list = domConstruct.create("div", {
                        class: "list displayNONE"
                    }, node);
                    domConstruct.create("span", {
                        class: "before",
                    }, list);
                    obj.forEach(function (item) {
                        var row = domConstruct.create("div", {
                            class: "row",
                            innerHTML: item.text
                        }, list)
                        var img = domConstruct.create("span", {
                            class: "img",
                            style: "background-image:url(" + item.img + "_unfocus.png)",
                        }, row, "first");
                        on(row, mouse.enter, function () {
                            domStyle.set(img, "background-image", "url(" + item.img + ".png)");
                        })
                        on(row, mouse.leave, function () {
                            domStyle.set(img, "background-image", "url(" + item.img + "_unfocus.png)");
                        })
                        if (typeof item.children === "object") {
                            domConstruct.create("span", {
                                class: "expendlistTriangle"
                            }, row);
                            createExpendList(row, item.children);
                        }
                    });
                    var evt;
                    on(node, "click", function () { //点击按钮
                        if (domClass.contains(list, "displayNONE")) {   //如果列表隐藏中
                            domClass.remove(list, "displayNONE");   //那么解除隐藏
                            evt = setTimeout(function () {  //设置定时器延迟（这个是为了防止点击新增的事件会被本次click事件触发）
                                $(document).one("click", function () {  //只要点击窗口
                                    domClass.add(list, "displayNONE")   //那么就让这个列表因此nag
                                })
                            }, 50)
                        } else {    //如果列表未隐藏（注意，此时有一个定时器的存在）
                            domClass.add(list, "displayNONE");  //那么让列表隐藏
                            clearTimeout(evt);  //并清除定时器，事实上不清除应该也是可以的，只不过domClass会被执行2次（这里和定时器的）
                        }
                    })
                }
    
                function createExpendList(node, obj) {  //创建二级下拉菜单
                    var list = domConstruct.create("div", {
                        class: "expendlist"
                    }, node);
                    domConstruct.create("span", {
                        class: "expendlistbefore",
                    }, list);
                    obj.forEach(function (item) {
                        var row = domConstruct.create("li", {
                            innerHTML: item.text
                        }, list)
                        var img = domConstruct.create("span", {
                            class: "img",
                            style: "background-image:url(" + item.img + "_unfocus.png)",
                        }, row, "first");
                        on(row, mouse.enter, function () {
                            domStyle.set(img, "background-image", "url(" + item.img + ".png)");
                        })
                        on(row, mouse.leave, function () {
                            domStyle.set(img, "background-image", "url(" + item.img + "_unfocus.png)");
                        })
                    });
    
                }
            })
    
    
        </script>
    </head>
    <body>
    <div class="parentDiv" id="parentDiv">
    
    
    </div>
    </body>
    </html>

[20160706141917691]: /images/20220721/a81da89498da4e32af65d4368e7d30cd.png