先上DEMO，
雖然丑，那是因為零級按鈕的界面太丑了，圖標(biāo)也丑┑(￣Д ￣)┍
這兩個優(yōu)化后會好很多，畢竟美觀不是我的特長嘛
DEMO鏈接：
http://download.csdn.net/detail/qq20004604/9568685
（83）二級下拉菜單
①過程描述：
【1】數(shù)據(jù)來源：一個數(shù)組，具體格式為：
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"}
]
}
]
樹形結(jié)構(gòu)；
數(shù)組每個單元由text（文字）屬性和img（圖片名）屬性；
假如其有下一級下拉菜單，那么將有children屬性（如果沒有則無）；
因為有兩級，所以部分會有兩層children屬性；
【2】添加形式：
樹的最頂層被顯式的顯示出來，如果其有下拉菜單，則有向下的箭頭圖標(biāo)；
一級下拉菜單（第一層children屬性里的元素），在點擊顯式顯示的元素后，被顯示出來，再次點擊任何區(qū)域，則隱藏；如果其有下一級下拉菜單，則該行右側(cè)有向右的箭頭圖標(biāo)；
二級下拉菜單，在鼠標(biāo)移動到其父結(jié)點時被顯示；
效果圖如圖：
（上面的DEMO圖）
②代碼：
我已經(jīng)將其整合在一個html文件里，因此直接貼出來全部的，注意圖片路徑和html文件路徑在一起，dojo和jquery文件在html文件的上級目錄。具體請查看代碼的引用方式。
由于代碼較長，建議自行建立一個html文件，然后將全部代碼復(fù)制進去后查看。
HTML的dom結(jié)構(gòu)參照最后一部分被注釋掉的內(nèi)容（缺少隱藏的邏輯）；
<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) { //創(chuàng)建標(biāo)簽頁（就是智能分析那一排）
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屬性，說明有下拉菜單，那么創(chuàng)建它
var text = domConstruct.create("span", {
class: "triangle"
}, node);
createTabList(node, obj.children);
}
return node;
}
function createTabList(node, obj) { //創(chuàng)建一級下拉菜單
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 () { //設(shè)置定時器延遲（這個是為了防止點擊新增的事件會被本次click事件觸發(fā)）
$(document).one("click", function () { //只要點擊窗口
domClass.add(list, "displayNONE") //那么就讓這個列表因此nag
})
}, 50)
} else { //如果列表未隱藏（注意，此時有一個定時器的存在）
domClass.add(list, "displayNONE"); //那么讓列表隱藏
clearTimeout(evt); //并清除定時器，事實上不清除應(yīng)該也是可以的，只不過domClass會被執(zhí)行2次（這里和定時器的）
}
})
}
function createExpendList(node, obj) { //創(chuàng)建二級下拉菜單
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 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>
