jquery实现横向树形可折叠菜单效果代码-html代码-BFW代码库

jquery实现横向树形可折叠菜单效果代码

代码语言：html

代码描述：jquery实现横向树形可折叠菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }
        .wrapper {
            max-width: 800px;
            width: 100%;
            height: 600px;
            background-color: #eeeeee;
            margin: 0 auto;
            padding: 10px;
            display: flex;
            align-items: center;
        }
        .wrapper li {
            width: 100px;
            text-align: center;
            position: relative;
        }
        .wrapper li::before {
            position: absolute;
            content: "";
            width: 100px;
            height: 2px;
            background-color: #333333;
            left: 50%;
            transform: translateX(-50%);
            top: 15px;
        }
        .circle {
            height: 30px;
            width: 30px;
            display: block;
            background-color: #8cef46;
            border-radius: 50%;
            position: relative;
            margin: 0 auto;
            font-size: 12px;
            line-height: 30px;
            cursor: pointer;
        }
        .children {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 100%;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .circle.hide-childs + ul.children {
            visibility: hidden;
            opacity: 0;
        }
        .children.first-child.top-child {
            height: 150px;
        }
        .children.first-child.bottom-child {
            height: 230px;
        }
        .children.second-child.bottom-child {
            height: 126px;
        }
        .children.second-child.top-child {
            height: 30px;
        }
        .children.third-child.top-child {
            height: 80px;
        }
        .children.first-child.bottom-child .children.second-child.top-child,
        .children.first-child.bottom-child .children.second-child.middle-child {
            height: 30px;
        }
        .children.first-child.bottom-child .children.second-child.bottom-child {
            height: 120px;
        }
        .children::before {
            position: absolute;
            content: "";
            left: 0;
            width: 2px;
            background-color: #333333;
            top: 15px;
            bottom: 15px;
        }
        .wrapper .last-child li::before,
        .wrapper li.hide-node::before {
            width: 50px;
            left: 0;
            transform: translateX(0);
        }
        .red {
            background-color: #D8A7C8;
        }
        .green {
            background-color: #B0EE91;
        }
        .purple {
            background-color: #8D9BF4;
        }
        .yellow {
            background-color: #F8E2A9;
        }
        .brown {
            background-color: #8D869A;
        }
        .hide-node::after {
            position: absolute;
            content: "+";
            font-size: 12px;
            top: -14px;
            left: 0;
            right: 0;
        }
        .last-child .hide-node::after {
            content: "";
        }
        .circle:active {
            transform: scale(0.9);
        }
    </style>



</head>

<body>
    <div class="wrapper">
        <ul class="parent">
            <li>
                <span class="circle green">12</span>
                <ul class="children first-child">
                    <li>
                        <span class="circle red">3</span>
                        <ul class="children first-child top-child">
                            <li>
                                <span class="circle brown">6</span>
                                <ul class="children second-child top-child">
                                    <li>
                                        <span class="circle">14</span>
                                        <ul class="childre.........完整代码请登录后点击上方下载按钮下载查看