先上DEMO，
虽然丑，那是因为零级按钮的界面太丑了，图标也丑┑(￣Д ￣)┍
这两个优化后会好很多，毕竟美观不是我的特长嘛
DEMO链接：
http://download.csdn.net/detail/qq20004604/9568685
（83）二级下拉菜单
①过程描述：
【1】数据来源：一个数组，具体格式为：
var dataArr = [{text: "测试1",img: "test"},{text: "测试2",{
text: "测试3",img: "test",children: [
{
text: "测试",children: [
{text: "测试",{text: "测试",img: "test"}
]
},img: "test"}
]
}
]
树形结构；
假如其有下一级下拉菜单，那么将有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",{
text: "测试3",children: [
{
text: "测试",children: [
{text: "测试",img: "test"}
]
},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,"url(" + item.img + "_unfocus.png)");
})
if (typeof item.children === "object") {
domConstruct.create("span",{
class: "expendlistTriangle"
},row);
createExpendList(row,item.children);
}
});
var evt;
on(node,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"
},{
class: "expendlistbefore",list);
obj.forEach(function (item) {
var row = domConstruct.create("li",{
innerHTML: item.text
},"url(" + item.img + "_unfocus.png)");
})
});
}
})
</script>
</head>
<body>
<div class="parentDiv" id="parentDiv">
<!-- <div class="data"><span class="img" style="background-image:url(test.png)"></span><span class="text">测试3</span><span
class="triangle"></span>
<div class="list"><span class="before"></span>
<div class="row"><span class="img"
style="background-image: url("test_unfocus.png");"></span>测试<span
class="expendlistTriangle"></span>
<div class="expendlist"><span class="expendlistbefore"></span>
<li><span class="img" style="background-image: url("test_unfocus.png");"></span>测试</li>
<li><span class="img" style="background-image: url("test_unfocus.png");"></span>测试</li>
</div>
</div>
<div class="row"><span class="img" style="background-image: url("test_unfocus.png");"></span>测试
</div>
</div>
</div>-->
</div>
</body>
</html>
原文链接：https://www.f2er.com/dojo/290937.html