current position:Home>Bootstrap and jQuery implement tree structure

Bootstrap and jQuery implement tree structure

2022-04-29 20:12:04Sigh of love

effect

 

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <!--  Latest version  Bootstrap  The core  CSS  file  -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
</head>
<link href="style.css" rel="stylesheet"/>
<!-- <script src="./resources/module/ui/jquery/jquery.min.js"></script> -->
<script src="jquery.min.js"></script>
<!-- <script src="./resources/module/ui/jquery/jquery.min.js"></script> -->
<!-- <script src="http://libs.baidu.com/jquery/1.11.1/jquery.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>
<body>
<div class="tree well">
    <ul>
        <li>
            <span><i class="icon-folder-open"></i>  Top level nodes 1</span> <a href="">Goes somewhere</a>
            <ul>
                <li>
                    <span><i class="icon-minus-sign"></i>  First level nodes 1</span> <a href=""></a>
                    <ul>
                        <li>
                            <span><i class="icon-leaf"></i>  Secondary node 1_1</span> <a href=""></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span><i class="icon-minus-sign"></i>  First level nodes 2</span> <a href=""></a>
                    <ul>
                        <li>
                            <span><i class="icon-leaf"></i> Secondary node 2_1</span> <a href=""></a>
                        </li>
                        <li>
                            <span><i class="icon-minus-sign"></i>  Secondary node 2_2</span> <a href=""></a>
                            <ul>
                                <li>
                                    <span><i class="icon-minus-sign"></i> Three level nodes 2_1</span> <a href=""></a>
                                    <ul>
                                        <li>
                                            <span><i class="icon-leaf"></i> Four level node 2_1</span> <a href=""></a>
                                        </li>
                                        <li>
                                            <span><i class="icon-leaf"></i>  Four level node 2_2</span> <a href=""></a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span><i class="icon-leaf"></i> Three level nodes 2_2</span> <a href=""></a>
                                </li>
                                <li>
                                    <span><i class="icon-leaf"></i>  Three level nodes 2_3</span> <a href=""></a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span><i class="icon-leaf"></i> Secondary node 2_3</span> <a href=""></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span><i class="icon-folder-open"></i>  Top level nodes 2</span> <a href=""></a>
            <ul>
                <li>
                    <span><i class="icon-leaf"></i>  First level nodes 2_1</span> <a href=""></a>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

copyright notice
author[Sigh of love],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291626399526.html

Random recommended