樹行列表
<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">內(nèi)容的主體</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>
