<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: #fff;
text-decoration: none;
display: block;
}
#ul1 {
width: 1000px;
font-size: 14px;
color: #fff;
line-height: 30px;
text-align: center;
margin: 0 auto;
margin-top: 50px;
}
#ul1 li {
display: inline-block;
float: left;
width: 98px;
height: 30px;
background: #666666;
border: 1px solid #fff;
}
#ul1 li:hover {
background:#DBDBDB;
}
#ul1 .ul2 {
display: none;
position: relative;
width: 100px;
}
#ul1 .ul2 li {
/*background: ;*/
position: relative;
}
#ul1 .ul2 li:hover {
background: #DBDBDB;
}
#ul1 .ul2 .ul3 li:hover {
background: #DBDBDB;
}
#ul1 .ul2 .ul3 li {
background: #666666;
}
#ul1 .ul2 .ul3 {
position: absolute;
left: 98px;
top: 0px;
display: none;
width: 100px;
height: 90px;
}
.right_flag{
background-image: url('right.png') !important;
background-size:20px 10px !important;
background-repeat:no-repeat !important;
background-position: left 72px top 10px !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul id="ul1"></ul>
</body>
<script>
$(function(){
var data=[
{
name:'家用电器',
childrens:[
{
name:"电视",
// childrens:[
// {name:'曲面电视'},
// {name:"超薄电视"},
// {name:"超薄电视"},
// {name:"超薄电视"},
// ]
},
{
name:"空调",
childrens:[
{name:'壁挂式空调'},
{name:"柜式空调"},
{name:"OLED电视"},
]
},
{
name:"洗衣机",
childrens:[
{name:'滚筒式洗衣机'},
{name:"洗烘一体机"},
{name:"波轮洗衣机"},
]
},
]
},
{ name:'工业品',
childrens:[
{
name:"工具",
childrens:[
{name:'手动工具'},
{name:"电动工具"},
{name:"测量工具"},
]
},
{
name:"劳动防护",
childrens:[
{name:'手部防护'},
{name:"足部防护"},
{name:"身体防护"},
]
},
{
name:"工控配电",
childrens:[
{name:'电线电缆'},
{name:"开关插座"},
{name:"抵押配电"},
]
},
]
},
{ name:'母婴',
childrens:[
{
name:"奶粉",
childrens:[
{name:'孕妈奶粉'},
{name:"特殊配方奶粉"},
{name:"有机奶粉"},
]
},
{
name:"营养辅食",
childrens:[
{name:'米粉/菜粉'},
{name:"面条/粥"},
{name:"果泥/果汁"},
]
},
{
name:"尿湿湿巾",
childrens:[
{name:'拉拉裤'},
{name:"成人尿裤"},
{name:"婴儿湿巾"},
]
},
]
},
{ name:'医药保健',
childrens:[
{
name:"中西药品",
childrens:[
{name:'感冒咳嗽'},
{name:"补肾壮阳"},
{name:"补气养血"},
]
},
{
name:"营养健康",
childrens:[
{name:'增强免疫'},
{name:"骨骼健康"},
{name:"补肾强身"},
]
},
{
name:"营养成分",
childrens:[
{name:'维生素/矿物质'},
{name:"胶原蛋白"},
{name:"益生菌"},
]
},
]
},
{ name:'食品',
childrens:[
{
name:"新鲜水货",
childrens:[
{name:'苹果'},
{name:"橙子"},
{name:"奇异果/猕猴桃"},
]
},
{
name:"蔬菜蛋品",
childrens:[
{name:'蛋品'},
{name:"叶菜类"},
{name:"根茎类"},
]
},
{
name:"精选肉类",
childrens:[
{name:'猪肉'},
{name:"牛肉"},
{name:"羊肉"},
]
},
]
},
];
var str=""
for(var i=0;i<data.length;i++){
str+=`<li class="li1"><a href="##">${data[i].name}</a><ul class="ul2">`
for(var j=0;j<data[i].childrens.length;j++){
str+=`<li class="li2 right_flag"><a href="##">${data[i].childrens[j].name}</a>`
str+=`<ul class="ul3">`
if(data[i].childrens[j].hasOwnProperty("childrens")){
for(var k=0;k<data[i].childrens[j].childrens.length;k++){
str+=`<li class="li3"><a href="##">${data[i].childrens[j].childrens[k].name}</a></li>`
}
str+="</ul></li>"
}else{
str+="</ul></li>"
}
}
str+="</ul></li>"
}
$("#ul1").append(str)
var ul1=$("#ul1");
var ul2=$(".ul2");
var li1=$(".li1");
var ul3=$(".ul3");
var li2=$(".li2");
filter_as("#ul1");
//获取二级菜单
getItem(li1, ul2);
//获取三级菜单
getItem(li2, ul3);
//显示下拉菜单
function getItem(obj, ul) {
for (var index = 0; index < obj.length; index++) {
obj[index].index = index;
obj[index].onmouseover = function() {
ul[this.index].style.display = "block";
}
obj[index].onmouseout = function() {
ul[this.index].style.display = "none";
}
}
}
})
function filter_as(one){
var zi_obj='';
$(one).children("li").each(function(){
li_a(this);
})
}
function li_a(obj){
var ul_obj=$(obj).children("ul");
var li_obj=ul_obj.children("li");
if(li_obj.length==0)
{
$(obj).removeClass("right_flag");
return;
}
li_obj.each(function(){
li_a(this);
})
}
</script>
</html>