无限级菜单的实现

最新推荐文章于 2024-05-06 10:59:29 发布

weixin_30810583

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量104

点赞数

文章标签：后端 javascript ViewUI

原文链接：http://www.cnblogs.com/zhoushangwu/p/8623962.html

版权

1、当菜单的a标签href中为空或者包含void时，可以直接点击，否则点击跳转到指定页面

2、菜单中的a标签href中为连接时，点击加好(+)可以展开子级，不点加好会导致跳转

3、用了部分css3

4、未测试兼容

5、审美神马的和我无关，没这方面的天赋

6、就是自己写着玩的，练练手，毕竟哥是搞后端的

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        * {
            list-style: none;
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            font-size: 12px;
        }

        .nav-treemenu {
            width: 199px;
            background-color: #333;
            color: #fff;
            overflow: hidden;
            border-right: 1px solid #fff;
        }

        .nav-treemenu ul {
            width: 220px;
            overflow-x: hidden;
            overflow-y: auto;
            transition: 0.5s;
            -moz-transition: 0.5s;
            -webkit-transition: 0.5s;
            -o-transition: 0.5s;
        }

        .nav-treemenu li {
            width: 200px;
            line-height: 30px;
            position: relative;
            cursor: pointer;
        }

        .nav-treemenu a {
            color: #fff;
            text-decoration: none;
            display: inline-block;
            line-height: 30px;
            height: 30px;
            width: 100%;
            padding: 0 10px;
            border-bottom: dotted 1px #999;
        }

        .nav-treemenu a:hover {
            background-color: #666;
        }

        .nav-treemenu span {
            padding: 0 5px 0 0;
            font-size: 16px;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {

            //菜单位置
            var childIndex = 0;
            setmenu($(".nav-treemenu"), childIndex)

            function setmenu(tant, childIndex) {
                if ($(tant).children("ul")) {
                    childIndex++
                    $(tant).children("ul").children("li").each(function () {
                        setmenu($(this), childIndex);
                    })
                    $(tant).children("a").css("padding-left", ((childIndex - 1) * 10) + "px")
                }
            }
            //设置初始
            //$(".nav-treemenu li ul").hide();
            $(".nav-treemenu li ul").height(0);

            //默认高度为父级容器的高度
            $(".nav-treemenu").height($(".nav-treemenu").parent().height());
            $(".nav-treemenu").children("ul").height($(".nav-treemenu").parent().height());

            //设置点击
            $(".nav-treemenu").on("click", "li", function (event) {
                var src = $(this).children("a").attr("href");
                if (src == "" || src == undefined || src == null || src.indexOf("void") >= 0) {
                    if ($(this).children("ul").height() == 0) {
                        var h = $(this).children("ul").children("li").length * 31;
                        $(this).parents("ul").each(function () {
                            $(this).height($(this).height() + h);
                        })
                        $(this).children("ul").height(h);
                        $(this).children("a").children("span").html("-");
                    } else {
                        $(this).children("ul").height(0);
                        $(this).children("a").children("span").html("+");
                    }
                }
                event.stopPropagation();
            });
            //加减号的展开
            $(".nav-treemenu").on("click", "span", function (event) {
                if ($(this).parent().next().height() == 0) {
                    var h = $(this).parent().next().children("li").length * 31;
                    $(this).parents("ul").each(function () {
                        $(this).height($(this).height() + h);
                    })
                    $(this).parent().next().height(h);
                    $(this).html("-");
                } else {
                    $(this).parent().next().height(0);
                    $(this).html("+");
                }
                return false;
            });
        });
    </script>
</head>

<body>
    <div style=" height:800px; background-color:bisque;">
        <div class="nav-treemenu">
            <ul>
                <li>
                    <a href="http://www.baidu.com">
                        <span>+</span>一级菜单</a>
                </li>
                <li>

                    <a>
                        <span>+</span>一级菜单</a>
                </li>
                <li>
                    <a>
                        <span>+</span>一级菜单</a>
                    <ul>
                        <li>
                            <a href="http://www.baidu.com">
                                <span>+</span>二级菜单</a>
                        </li>
                        <li>
                            <a href="http://www.baidu.com">
                                <span>+</span>二级菜单</a>
                            <ul>
                                <li>
                                    <a href="http://www.baidu.com">
                                        <span>+</span>三级菜单</a>
                                </li>
                                <li>
                                    <a>
                                        <span>+</span>三级菜单</a>
                                </li>
                                <li>
                                    <a>
                                        <span>+</span>三级菜单</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a>
                                <span>+</span>二级菜单</a>
                            <ul>
                                <li>
                                    <a href="http://www.baidu.com">
                                        <span>+</span>三级菜单</a>
                                </li>
                                <li>
                                    <a>
                                        <span>+</span>三级菜单</a>
                                    <ul>
                                        <li>
                                            <a href="http://www.baidu.com">
                                                <span>+</span>四级菜单</a>
                                        </li>
                                        <li>
                                            <a>
                                                <span>+</span>四级菜单</a>
                                        </li>
                                        <li>
                                            <a>
                                                <span>+</span>四级菜单</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a>
                                        <span>+</span>三级菜单</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
</body>

</html>

　　效果图

转载于:https://www.cnblogs.com/zhoushangwu/p/8623962.html

weixin_30810583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限级菜单的实现

1、当菜单的a标签href中为空或者包含void时，可以直接点击，否则点击跳转到指定页面2、菜单中的a标签href中为连接时，点击加好(+)可以展开子级，不点加好会导致跳转3、用了部分css34、未测试兼容5、审美神马的和我无关，没这方面的天赋6、就是自己写着玩的，练练手，毕竟哥是搞后端的<!DOCTYPE html><html>...
复制链接

扫一扫