树形结构菜单

2015-06-09 09:37:29 226 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

树形菜单、树形结构初学习我们一般会需要将平铺的菜单数据列表转换为树形结构展示的菜单数据，这句话的意思是将数据库中的菜单表转化为树形结构的菜单后端接口方法并通过业务层具体实现其逻辑，以便前端调用和展示。在这个示例中，我们创建了一个简单的树形菜单，包含一个文件菜单和四个菜单项：新建、打开、保存和退出。总的来说，树形结构是一种通用的数据组织方式，而树形菜单是一种特定应用场景下基于树形结构设计的用户界面元素。这只是一个简单的示例，实际的树形菜单可能会包含更多的菜单和菜单项，并且可能需要根据具体需求进行定制。树形结构是一种数据结构，它由。阅读详情

有一份树形菜单代码，但是用的jquery，但我项目里面拥的是angular，本人对jquery不通，大家能帮忙该下吗，代买不长

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Bootstrap树形菜单JS代码特效 - JS代码网</title>

    <!--图标样式-->

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

    <!--主要样式-->

    <link rel="stylesheet" type="text/css" href="css/style.css" />



    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');

            $('.tree li.parent_li > span').on('click', function (e) {

                var children = $(this).parent('li.parent_li').find(' > ul > li');

                if (children.is(":visible")) {

                    children.hide('fast');

                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');

                } else {

                    children.show('fast');

                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');

                }

                e.stopPropagation();

            });

        });

    </script>



</head>

<body>

    <h2>Bootstrap树形菜单JS代码特效</h2>

    <div class="tree well">

        <ul>

            <li>

                <span><i class="icon-folder-open"></i> Parent</span>

            </li>

            <ul>

                <li>

                    <span><i class="icon-minus-sign"></i> Child</span>

                    <ul>

                        <li>

                            <span><i class="icon-leaf"></i> Grand Child</span>

                        </li>

                    </ul>

                </li>

                <li>

                    <span><i class="icon-minus-sign"></i> Child</span>

                    <ul>

                        <li>

                            <span><i class="icon-leaf"></i> Grand Child</span>

                        </li>

                        <li>

                            <span><i class="icon-minus-sign"></i> Grand Child</span>

                            <ul>

                                <li>

                                    <span><i class="icon-minus-sign"></i> Great Grand Child</span>

                                    <ul>

                                        <li>

                                            <span><i class="icon-leaf"></i> Great great Grand Child</span>

                                        </li>

                                        <li>

                                            <span><i class="icon-leaf"></i> Great great Grand Child</span>

                                        </li>

                                    </ul>

                                </li>

                                <li>

                                    <span><i class="icon-leaf"></i> Great Grand Child</span>

                                </li>

                                <li>

                                    <span><i class="icon-leaf"></i> Great Grand Child</span>

                                </li>

                            </ul>

                        </li>

                        <li>

                            <span><i class="icon-leaf"></i> Grand Child</span>

                        </li>

                    </ul>

                </li>

            </ul>

        </ul>

    </div>

</body>

</html>