树形列表

<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"><<</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 == '<<') {

                d1.style.display = 'none';

                d2.innerHTML = '>>';

            } else {

                d1.style.display = 'block';

                d2.innerHTML = '<<'

            }

        }

    </script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容