前端2级菜单

最新推荐文章于 2024-05-01 15:11:42 发布

砂锅大的拳头

最新推荐文章于 2024-05-01 15:11:42 发布

阅读量364

点赞数

本文链接：https://blog.csdn.net/weixin_43343423/article/details/90408754

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>菜单</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .container {
                width: 1200px;
                background: pink;
                margin: 0 auto;
            }

            ul {
                position: relative;
                list-style: none;
                width: 200px;
                height: 600px;
                background: rgba(0,0,0,0.5);
            }
            li{

                /*width: 200px;*/
                height: 50px;
                text-align: center;
                line-height: 50px;

            }
            .pop{
                top:0;
                width: 600px;
                position: absolute;
                left: 200px;
                background: yellow;
                display: flex;
                flex-wrap: wrap;
            }
            .cpop{
                width: 200px;
            }
            /*隐藏样式*/
            .hidd{
                display: none;
            }
            /*.pop{}*/
        </style>
    </head>
    <body>
        <div class="container">
            <ul>
                <!--<li><span>一级节点</span>-->
                    <!--<div class="pop  hidd">-->
                        <!--<div class="cpop">儿子节点</div>-->
                        <!--<div class="cpop">儿子节点</div>-->
                        <!--<div class="cpop">儿子节点</div>-->
                        <!--<div class="cpop">儿子节点</div>-->
                    <!--</div>-->
                <!--</li>-->
                <!--<li><span>一级节点</span>-->
                    <!--<div class="pop  hidd">-->
                        <!--<div class="cpop">小儿子</div>-->
                        <!--<div class="cpop">小儿子</div>-->
                        <!--<div class="cpop">小儿子</div>-->
                        <!--<div class="cpop">小儿子</div>-->
                    <!--</div>-->
                <!--</li>-->
                <!--<li><span>一级节点</span></li>-->
            </ul>
        </div>
        <script>
            var arr = [
                {
                    "id": 1, "name": "手机", "pid": 0, "level": 1, "child": [
                        {"id": 2, "name": "iphone", "pid": 1, "level": 2},
                        {"id": 3, "name": "huawei", "pid": 1, "level": 2}
                    ]
                },
                {
                    "id": 5, "name": "电脑", "pid": 0, "level": 1, "child": [
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},
                        {"id": 7, "name": "联想", "pid": 5, "level": 2},

                    ]
                }
            ];
            $(function () {
                $("ul").on("mouseover","li",function () {
                    $(this).find(".pop").removeClass("hidd");
                })
                $("ul").on("mouseout","li",function () {
                    $(this).find(".pop").addClass("hidd");
                })
                var html="";
                $.each(arr,function (index,caidan) {
                    var chtml="";
                    $.each(arr[index].child,function (cindex,ccaidan) {
                        chtml+=` <div class="cpop">${ccaidan.name}</div>`;
                    })
                    html+=`<li><span>${caidan.name}</span>
                    <div class="pop  hidd">
                        ${chtml}
                    </div>
                </li>`;
                });
                $("ul").append(html);
            })
        </script>
    </body>
    <script>

    </script>
</html>

砂锅大的拳头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端2级菜单

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>菜单</title> <script src="js/jquery-3.3.1.min.js"></script&...
复制链接

扫一扫