树形列表

<style>
    div {
        float: left;
        height: 100px;
        line-height: 100px;
    }
            
    #d1,
    #d3 {
        background-color: #ccff00;
    }
    
    #d2 {
        cursor: pointer;
        background-color: #ffcc00;
    }
</style>

</head>

<body>
    <div id="d1">树形列表</div>
    <div id="d2">&lt;&lt;</div>
    <div id="d3">内容的主体</div>
    <script>
        var d1 = document.getElementById('d1');
        var d2 = document.getElementById('d2');
        var d3 = document.getElementById('d3');
        d2.onclick = function() {
            if(d2.innerHTML == '&lt;&lt;') {
                d1.style.display = 'none';
                d2.innerHTML = '&gt;&gt;';
            } else {
                d1.style.display = 'block';
                d2.innerHTML = '&lt;&lt;'
            }
        }
    </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容