树形列表

作者: 任仪凡 | 来源:发表于2018-08-07 15:55 被阅读0次

<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>