利用ajax实现二级菜单

最新推荐文章于 2021-08-06 02:18:47 发布

原创最新推荐文章于 2021-08-06 02:18:47 发布 · 589 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

应用案例专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种利用Ajax技术动态加载二级菜单的方法，通过解析JSON数据，自动生成响应式导航菜单，增强了用户体验并提高了网站的交互性。

利用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": [
            "租车用车",
            "牛人专享",
            "牛人专享",
            "牛人专享"
        ]
    }
]