如何用CSS设置纵向树型展开目录

html-css026

如何用CSS设置纵向树型展开目录,第1张

简单的话，可以这么做，用JS

function opencat(cat){

if(document.getElementById(cat).style.display=="none"){

document.getElementById(cat).style.display=""

}

else {

document.getElementById(cat).style.display="none"

}

}

然后在要收缩菜单的按钮或链接上这么做 比如超连接

<a id="menu1" href="#" style="display:block" onclick="opencat('list1')">

下面紧跟着的是展开后的目录内容，可以是Table，也可以是DIV

<table id="list1">

<tr><td>111111</td></tr>

<tr><td>222222</td></tr>

<tr><td>33333</td></tr>

<tr><td>4444444</td></tr>

<tr><td>5555555</td></tr>

</table>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>New Document </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<script type="text/javascript">

<!--

function cancel(){

event.cancelBubble=true

}

function toggle(obj){

var display=obj.children[0].style.display

//alert(display)

if(display=='block'){

obj.children[0].style.display='none'

}else{

obj.children[0].style.display='block'

}

}

//-->

</script>

<style type="text/css">

ul{

list-style-type:none

}

.first{

color:red

}

.style1{

color:red

}

.style2{

color:block

}

</style>

</head>

<body>

<ul>

<li onclick="toggle(this)" onMouseover="this.className='style2'" onMouseout="this.className='style1'">

第一级

<ul style="display:block">

<li onclick="cancel()">第二级

<li onclick="cancel()">第二级

</ul>

<li onclick="toggle(this)" >第一级

<ul style="display:block">

<li onclick="cancel()">第二级

<li onclick="cancel()">第二级

</ul>

</ul>

</body>

</html>