亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

看到XboxYan寫的《純 CSS 實(shí)現(xiàn)帶連接線的樹形組件》，隨手改了個(gè)div版本，這下沒有details和summary的也能用了。

效果一樣： 

css:

<style>
    .treeview div.summary{
            outline: 0;
            padding-left: 30px;
            background: repeating-linear-gradient( 90deg, #999 0 1px,transparent 0px 2px) 0px 50%/20px 1px no-repeat;
    }
    .treeview div.details>div.details:last-child{
            background-size: 1px 23px;
    }
    .treeview>div.details:not(:last-child)>div.details:last-child{
            background-size: 1px 100%;
    }
    .treeview div.details{
            padding-left: 38px;
            background: repeating-linear-gradient( #999 0 1px,transparent 0px 2px) 38px 0px/1px 100% no-repeat;
    }
    .treeview div.details>div.details{
            display: none;
            transition: .2s;
    }
    .treeview div.open>div.details{
            display: block;
            transition: .2s;
    }
    .treeview>div.details{
            background: none;
            padding-left: 0;
    }
    .treeview>div.details>div.summary{
            background: none;
            padding-left: 0;
    }
    .treeview>div.details>div.details{
            padding-left: 8px;
            background: repeating-linear-gradient( #999 0 1px,transparent 0px 2px) 8px 0px/1px 100% no-repeat;
    }
    .treeview div.summary{
            display: flex;
            align-items: center;
            height: 46px;
            font-size: 15px;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.85);
            cursor: default;
    }
    .treeview div.summary::after{
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            height: 38px;
            background: #EEF2FF;
            border-radius: 8px;
            z-index: -1;
            opacity: 0;
            transition: .2s;
    }
    .treeview div.summary:hover::after{
            opacity: 1;
    }
    .treeview div.summary:not(:only-child)::before{
            content: '';
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            margin-right: 8px;
            border: 1px solid #999;
            background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,linear-gradient(#999, #999)  50%/10px 1px no-repeat;
    }
    .treeview div.open>div.summary::before{
            background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;
    }
</style>

html:

<div class="treeview" id="treeview">
        <div class="details">
                <div class="summary tree-item">項(xiàng)目1</div>
                <div class="details">
                        <div class="summary tree-item">文件夾</div>
                        <div class="details">
                                <div class="summary tree-item">sdd</div>
                        </div>
                </div>
                <div class="details">
                        <div class="summary tree-item">chrome test</div>
                </div>
        </div>
        <div class="details">
                <div class="summary tree-item">項(xiàng)目2</div>
                <div class="details">
                        <div class="summary tree-item">文件夾2-1</div>
                        <div class="details">
                                <div class="summary tree-item">文件夾2-1-1</div>
                                <div class="details">
                                        <div class="summary tree-item">文件夾2-1-1-1</div>
                                        <div class="details">
                                                <div class="summary tree-item">文件夾2-1-1-1-1</div>
                                                <div class="details">
                                                        <div class="summary tree-item">文件夾2-1-1-1-1-1</div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
        <div class="details">
                <div class="summary tree-item">文件夾1</div>
                <div class="details">
                        <div class="summary tree-item">文件夾</div>
                </div>
                <div class="details">
                        <div class="summary tree-item">文件夾2</div>
                </div>
        </div>
        <div class="details">
                <div class="summary tree-item">項(xiàng)目3</div>
                <div class="details">
                        <div class="summary tree-item">文件夾1</div>
                        <div class="details">
                                <div class="summary tree-item">1</div>
                                <div class="details">
                                        <div class="summary tree-item">文件夾2</div>
                                </div>
                        </div>
                </div>
                <div class="details">
                        <div class="summary tree-item">文件夾</div>
                </div>
                <div class="details">
                        <div class="summary tree-item">文件夾</div>
                </div>
                <div class="details">
                        <div class="summary tree-item">文件夾</div>
                </div>
                <div class="details">
                        <div class="summary tree-item">文件夾的副本</div>
                </div>
                <div class="details">
                        <div class="summary tree-item">點(diǎn)點(diǎn)點(diǎn)</div>
                </div>
                <div class="details">
                        <div class="summary tree-item">hewei</div>
                        <div class="details">
                                <div class="summary tree-item">hewei02</div>
                        </div>
                </div>
        </div>
</div>

script:

<script>
        document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('#treeview div.summary').forEach(summary => {
                        summary.addEventListener('click', (e)=>{
                                if (e.currentTarget.nextElementSibling !== null)
                                        e.currentTarget.parentElement.classList.toggle('open');
                        });
                });
        });
</script>

如需兼容更低版本，jQuery版實(shí)現(xiàn)如下（代碼貌似更簡(jiǎn)潔）：

<script>
    $(document).ready(function() {
        $('#treeview div.summary').click(function(e) {
            if ($(this).next().length > 0) {
                $(this).parent().toggleClass('open');
            }
        });
    });
</script>

?