利用ajax实现二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {padding: 0;margin: 0;list-style: none;}
a {text-decoration: none;color: #000;display: block;}
.top {width: 100%;height: 40px;background-color: #999;}
.top>.nav {width: 1200px;height: 40px;margin: 0 auto;}
.top>.nav>li {float: left;height: 40px;position: relative;}
.top>.nav>li.active{background-image: url(images/arrow.png);background-repeat: no-repeat;background-position: right center;}
.top>.nav>li>a {height: 40px;line-height: 40px;padding: 0 15px;}
.top>.nav>li>ol {position: absolute;top: 39px;left: 0;border: 1px solid #000;display: none;}
.top>.nav>li>ol>li>a {line-height: 20px;text-align: center;}
</style>
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="top">
<ul class="nav">
<!--<li><a href="#">首页</a></li>
<li class="active">
<a href="#">我的订单</a>
<ol>
<li>我的订单</li>
<li>我的订单</li>
<li>我的订单</li>
<li>我的订单</li>
</ol>
</li>
<li><a href="#">我的会员</a></li>
<li class="active">
<a href="#">购物车</a>
<ol>
<li>购物车</li>
<li>购物车</li>
<li>购物车</li>
<li>购物车</li>
</ol>
</li>
<li><a href="#">联系我们</a></li>-->
</ul>
</div>
<script>
$(function(){
$.ajax({
url:'data.json',
success: function (res) {
console.log(res)
$.each(res,function(index,value){
console.log(value['title'])
var uli = $('<li><a>'+value['title']+'</a></li>')
var arr = value['area']
if(arr){
uli.addClass('active')
var ol = $('<ol></ol>')
$.each(arr,function(index1,ele){
var oli = $('<li><a>'+ele+'</a></li>')
ol.append(oli)
uli.append(ol)
})
}
$('.nav').append(uli)
})
$('.top>.nav>li').each(function(){
$(this).hover(function(){
$(this).not('.active').children('a').css('color','#f00')
$(this).children('ol').show()
},function(){
$(this).not('.active').children('a').css('color','#000')
$(this).children('ol').hide()
})
})
}
})
})
</script>
</body>
</html>
[
{ "title": "首页" },
{
"title": "跟团游",
"area": [
"境内跟团",
"国内跟团",
"周边跟团"
]
},
{
"title": "自助游",
"area": [
"境内跟团",
"国内跟团",
"周边跟团"
]
},
{
"title": "邮轮",
"area": [
"包航专项",
"国内跟团",
"周边跟团"
]
},
{
"title": "酒+景",
"tag": "自驾"
},
{
"title": "机票",
"tag": "HOT",
"area": [
"特价机票",
"国内跟团",
"周边跟团"
]
},
{
"title": "酒店",
"area": [
"国内酒店",
"国内跟团"
]
},
{
"title": "火车票"
},
{
"title": "汽车票"
},
{
"title": "用车"
},
{
"title": "门票",
"tag": "上海迪士尼"
},
{
"title": "特卖",
"area": [
"今日必抢",
"牛人专享"
]
},
{
"title": "主题游",
"area": [
"瓜果亲子游",
"牛人专享"
]
},
{
"title": "出游服务",
"area": [
"租车用车",
"牛人专享",
"牛人专享",
"牛人专享"
]
},
{
"title": "定制游",
"area": [
"租车用车",
"牛人专享",
"牛人专享",
"牛人专享"
]
},
{
"title": "金融",
"area": [
"租车用车",
"牛人专享",
"牛人专享",
"牛人专享"
]
},
{
"title": "攻略",
"area": [
"租车用车",
"牛人专享",
"牛人专享",
"牛人专享"
]
}
]